Stamp Annotations

Stamp annotations allow users to place an image annotation onto any page on the document. It is the most versatile annotation since you can draw anything as its content.

Rubber stamps are also stamp annotations and the PDF specification defines a standard set of rubber stamps. WebViewer also provides the ability to create custom stamps by setting the text of the stamp annotation.

Along with free hand signature annotations, stamp annotations can also be used to sign a signature field.

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', async () => {
      const res = await fetch('https://myserver/files/myImage.png'); // Include custom headers as necessary

      const imageBlob = await res.blob();
      const reader = new FileReader();
      reader.onloadend = async () => {
        const annot = new Annotations.StampAnnotation({
          PageNumber: 1,
          X: 100,
          Y: 50,
          Width: 25,
          Height: 25,
        });

        const base64data = reader.result;
        await annot.setImageData(base64data); // Base64 URL or SVG

        annotationManager.addAnnotation(annot);
        annotationManager.redrawAnnotation(annot);
      }
      reader.readAsDataURL(imageBlob);
    });
  });

Element name: stamp

<stamp page="0" rect="284.620,609.810,309.620,634.810" color="#FF0000" flags="print" name="8accde44-0901-353e-4602-9af537c28468" subject="Stamp" date="D:20220708163705-07'00'" creationdate="D:20220708163452-07'00'" icon="Draft">
  <trn-custom-data bytes="{"trn-annot-maintain-aspect-ratio":"true","trn-unrotated-rect":"284.620,609.810,309.620,634.810"}"/>
  <imagedata>...</imagedata>
</stamp>

For the full list of properties, please visit the annotation's API docs.

An enum with possible rubber stamp names. See the Icon property to change what is shown on the stamp.

Values:

• APPROVED
• AS_IS
• COMPLETED
• CONFIDENTIAL
• DEPARTMENTAL
• DRAFT
• EXPERIMENTAL
• EXPIRED
• FINAL
• FOR_COMMENT
• FOR_PUBLIC_RELEASE
• INFORMATION_ONLY
• NOT_APPROVED
• NOT_FOR_PUBLIC_RELEASE
• PRELIMINARY_RESULTS
• SB_REJECTED
• SH_ACCEPTED
• SH_INITIAL_HERE
• SH_SIGN_HERE
• SH_WITNESS
• SOLD
• TOP_SECRET
• VOID

Gets or sets the type of the stamp. The icon is used when there is no image data for the stamp. The PDF specification defines a standard set.

The primary feature for a stamp annotation is its image. Stamp annotations provides the getImageData API to get the base64 data URL representing the image asynchronously.

WebViewer(...)
  .then(instance => {
    const { annotationManager, Annotations } = instance.Core;

    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
      if (action === 'delete') {
        annotations.forEach(async annot => {
          if (annot instanceof Annotations.StampAnnotation) {
            const imageData = await annot.getImageData();

            const image = new Image();
            image.width = annot.Width;
            image.height = annot.Height;
            image.onload = function() {
              // Use image
            };
            image.src = imageData;
          }
        });
      }
    });
  });

To set the image data for a stamp, you can provide a regular or data URL to setImageData. You should use this to initialize stamp annotations with the image of your choice. When the image data and stamp text are not set, the icon set on the Icon property will be rendered.

If you have stamp text set, you can use getStampText to retrieve it.

WebViewer provides a way to create rubber stamps outside of the standard stamp icon set. You can use setStampText to set the text you want on the stamp.

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annot = new Annotations.StampAnnotation({
        PageNumber: 1,
        X: 100,
        Y: 50,
        Width: 25,
        Height: 25,
      });

      annot.setStampText('Hello World');

      annotationManager.addAnnotation(annot);
      annotationManager.redrawAnnotation(annot);
    });
  });

Stamp annotations are the best annotations to render custom content as the image data can be preserved. You can use the stamp annotation as a base class for custom annotations where its visual appearance is the primary feature. This will allow the custom annotation to render correctly outside of WebViewer when the document is saved. However, it will be saved as a stamp and read as a stamp. It will not be able to retain it's original custom annotation class/type as the custom annotation does not exist in the PDF specification and will be discarded/ignored.

As such, WebViewer's CustomAnnotation leverages the stamp annotation and custom data to preserve it's custom appearance and type in other viewers. This allows it to be saved and viewed in other viewers. When deserialized back in WebViewer, it can be deserialized into it's original custom annotation class type.