Rasterex API/docs/components/placement/stamp

Stamp

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

Overview

Use stampControl to open or close the canvas stamp placement UI.

Use uploadStamp to send one or more remote stamp URLs into the active canvas session and observe the result through uploadStampResult.

  • Open: show the stamp placement UI inside the active canvas session.
  • Close: dismiss the stamp placement UI programmatically.
  • Upload remote stamps: provide one or more stamp URLs and optionally request that the canvas opens the stamp panel after upload.
  • Optional request ID: include requestId when you want to correlate logs on the host side.

Open and Close

Send stampControl with the required command field.

Open Stamp UI

iframe.contentWindow.postMessage({
  type: 'stampControl',
  payload: { command: 'open', requestId: 'stamp-1' }
}, '*');

Close Stamp UI

iframe.contentWindow.postMessage({
  type: 'stampControl',
  payload: { command: 'close', requestId: 'stamp-2' }
}, '*');

Upload Stamps

Send uploadStamp with one or more remote URLs when the host needs to preload stamps into the canvas session.

The canvas responds with uploadStampResult, including per-item results and whether the panel ended in an opened state.

Upload stamp URLs

iframe.contentWindow.postMessage({
  type: 'uploadStamp',
  payload: {
    requestId: 'stamp-upload-1',
    urls: [
      'https://example.com/stamps/approved.png',
      'https://example.com/stamps/rejected.png'
    ],
    openStampPanel: true
  }
}, '*');

Handle uploadStampResult

window.addEventListener('message', (event) => {
  if (event.data.type !== 'uploadStampResult') return;

  const { success, requestId, opened, results } = event.data.payload;
  console.log('uploadStampResult', { success, requestId, opened, results });
});

Recommended Workflow

Keep the host workflow simple and send the command only after the canvas is ready.

  • 11. Wait for readiness: Make sure the iframe session is active before sending stamp commands.
  • 22. Open placement: Send stampControl with command: "open" when the user starts stamp placement.
  • 33. Upload stamps when needed: Send uploadStamp with one or more remote URLs and decide whether openStampPanel should be true or false.
  • 44. Observe `uploadStampResult`: Use the response payload to inspect per-item success and final panel state.
  • 55. Close when needed: Send command: "close" to dismiss it programmatically.

Complete Example

This example wires stamp open, close, and upload actions to the current canvas iframe.

const viewerOrigin = '*';
const iframe = document.querySelector('iframe');

function openStampPlacement() {
  iframe.contentWindow.postMessage({
    type: 'stampControl',
    payload: {
      command: 'open',
      requestId: 'stamp-open-' + Date.now()
    }
  }, viewerOrigin);
}

function closeStampPlacement() {
  iframe.contentWindow.postMessage({
    type: 'stampControl',
    payload: {
      command: 'close',
      requestId: 'stamp-close-' + Date.now()
    }
  }, viewerOrigin);
}

function uploadStampUrls() {
  iframe.contentWindow.postMessage({
    type: 'uploadStamp',
    payload: {
      requestId: 'stamp-upload-' + Date.now(),
      urls: [
        'https://example.com/stamps/approved.png',
        'https://example.com/stamps/rejected.png'
      ],
      openStampPanel: true
    }
  }, viewerOrigin);
}

document.getElementById('openStampBtn').addEventListener('click', openStampPlacement);
document.getElementById('closeStampBtn').addEventListener('click', closeStampPlacement);
document.getElementById('uploadStampBtn').addEventListener('click', uploadStampUrls);

window.addEventListener('message', (event) => {
  if (event.data.type !== 'uploadStampResult') return;
  console.log('Stamp upload result', event.data.payload);
});
Complete Example