Rasterex APINPM Package/docs/components/placement/stamp

Stamp

Control the canvas stamp panel and upload remote stamp URLs from the host application using the SDK.

Overview

Use viewer.tools.stamps to open, close, or toggle the Canvas stamp panel, and to upload remote image URLs into the Canvas stamp store.

Stamp tools are available after the viewer is mounted, Canvas is ready, and a document is open.

typescript
import { createViewer } from "@rasterex/viewer";

const viewer = createViewer({
  container: "#viewer"
});

await viewer.mount();
await viewer.ready();

await viewer.documents.open({
  url: "https://files.example.com/sample.pdf",
  displayName: "Sample PDF.pdf"
});
Overview

Open, Close or Toggle Panel

Open, close, or toggle the panel state programmatically. These methods return a Promise resolving to the panel status:

  • viewer.tools.stamps.open() sends stampControl with command: "open" and waits for stampControlResult.
  • You can specify an optional custom timeout:

Toggle stamp panel with timeout

await viewer.tools.stamps.toggle({
  timeoutMs: 8000
});
typescript
// Open the stamp panel
const result = await viewer.tools.stamps.open();

// Close the stamp panel
await viewer.tools.stamps.close();

// Toggle panel state
await viewer.tools.stamps.toggle();
Open, Close or Toggle Panel

Upload Stamps

Preload remote image URLs directly into the active Canvas stamp store:

  • urls must be image URLs that the Canvas iframe is allowed to fetch (browser File objects are not supported).
  • When openStampPanel is true, Canvas automatically enables the STAMP tool and reveals the panel after uploading.
typescript
const result = await viewer.tools.stamps.upload({
  urls: [
    "/stamps/approved.png",
    "/stamps/rejected.png"
  ],
  openStampPanel: true
});

for (const item of result.results) {
  console.log(item.source, item.success, item.duplicate);
}
Upload Stamps

Types Reference

Typings and result shapes for stamp workflows:

typescript
type StampPanelResult = {
  success: boolean;
  requestId?: string;
  command?: "open" | "close" | "toggle";
  opened?: boolean;
  error?: string;
};

type StampUploadOptions = {
  urls: string[];
  openStampPanel?: boolean;
  requestId?: string;
  timeoutMs?: number;
};
Types Reference

Vanilla Example

Complete integration code setup for Vanilla HTML/JS environments:

<div id="viewer" style="height: 640px"></div>

<div>
  <button type="button" id="open-stamps">Open Stamps</button>
  <button type="button" id="close-stamps">Close Stamps</button>
  <button type="button" id="toggle-stamps">Toggle Stamps</button>
  <button type="button" id="upload-stamps">Upload Stamps</button>
</div>

<p id="status"></p>
Vanilla Example

Canvas Broker Mapping

Broker message mapping for stamp tools:

  • viewer.tools.stamps.open(...) maps to stampControl / stampControlResult.
  • viewer.tools.stamps.close(...) maps to stampControl / stampControlResult.
  • viewer.tools.stamps.toggle(...) maps to stampControl / stampControlResult.
  • viewer.tools.stamps.upload(...) maps to uploadStamp / uploadStampResult.