Work with Stamp Annotations in WebViewer

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.

Instantiation

JavaScript (SDK v8.0+)

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);
    });
  });

DocumentViewer#annotationsLoaded StampAnnotation setImageData AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('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

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

DocumentViewer#annotationsLoaded StampAnnotation setImageData AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

XFDF

Element name: stamp

Shell

<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>

Required properties

PageNumber

Gets or sets the page number of a document that the annotation appears on.

X

Gets or sets the annotation's x-axis position.

Y

Gets or sets the annotation's y-axis position.

Height

Gets or sets the height of the annotation.

Width

Gets or sets the width of the annotation.

Notable properties

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

[static] IconNames

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

Icon

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.

Author

The author of the annotation.

Color

Gets or sets the annotation's stroke color.

Hidden

Gets or sets whether the annotation is hidden.

Invisible

Gets or sets whether the annotation is invisible, only if it is an unknown annotation type. Generally for hiding annotations you should use "Hidden".

IsClickableOutsideRect

Gets or sets whether any parts of the annotation drawn outside of the rect are clickable.

Listable

Gets or sets whether the annotation should be listed in annotation lists. If set to false, the annotation will also become unselectable.

Locked

Gets or sets whether the annotation is locked or not. If it's locked it can't be edited or deleted, but the note can be edited.

LockedContents

Gets or sets whether the annotation contents are locked or not. If the contents are locked then note can't be edited but the annotation can be edited or deleted.

NoDelete

Gets or sets if this annotation can be deleted.

NoMove

Gets or sets whether or not the annotation can be moved.

NoResize

Gets or sets if this annotation can be resized by the user.

NoRotate

Gets or sets if this annotation can be rotated.

NoView

Gets or sets whether the annotation is visible on the screen. Differs from Hidden in that it can still be printed if the print flag is set.

NoZoom

Gets or sets if this annotation scales with the page.

Opacity

Gets or sets the opacity of the annotation.

Printable

Gets or sets whether the annotation should be displayed when printing the page.

ReadOnly

Gets or sets whether the annotation is readonly or not. If it's readonly both the annotation itself and its note can't be edited or deleted.

ToggleNoView

Gets or sets whether the ToggleNoView flag is set on the annotation.

Useful methods

getImageData

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.

JavaScript (SDK v8.0+)

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;
          }
        });
      }
    });
  });

getImageData

JavaScript (SDK v6.0+)

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

    annotManager.on('annotationChanged', (annotations, action) => {
      if (action === 'delete') {
        annotations.forEach(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;
          }
        });
      }
    });
  });

getImageData

setImageData

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.

getStampText

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

setStampText

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.

JavaScript (SDK v8.0+)

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);
    });
  });

setStampText

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('annotationsLoaded', () => {
      const annot = new Annotations.StampAnnotation();
      annot.PageNumber = 1;
      annot.X = 100;
      annot.Y = 50;
      annot.Width = 150;
      annot.Height = 25;

      annot.setStampText('Hello World');

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

setStampText

Alternative use cases

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.