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.

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, annotationManager, Annotations } = instance.Core;
4
5    documentViewer.addEventListener('annotationsLoaded', async () => {
6      const res = await fetch('https://myserver/files/myImage.png'); // Include custom headers as necessary
7
8      const imageBlob = await res.blob();
9      const reader = new FileReader();
10      reader.onloadend = async () => {
11        const annot = new Annotations.StampAnnotation({
12          PageNumber: 1,
13          X: 100,
14          Y: 50,
15          Width: 25,
16          Height: 25,
17        });
18
19        const base64data = reader.result;
20        await annot.setImageData(base64data); // Base64 URL or SVG
21
22        annotationManager.addAnnotation(annot);
23        annotationManager.redrawAnnotation(annot);
24      }
25      reader.readAsDataURL(imageBlob);
26    });
27  });

1WebViewer(...)
2  .then(instance => {
3    const { docViewer, annotManager, Annotations } = instance;
4
5    docViewer.on('annotationsLoaded', async () => {
6      const res = await fetch('https://myserver/files/myImage.png'); // Include custom headers as necessary
7
8      const imageBlob = await res.blob();
9      const reader = new FileReader();
10      reader.onloadend = async () => {
11        const annot = new Annotations.StampAnnotation({
12          PageNumber: 1,
13          X: 100,
14          Y: 50,
15          Width: 25,
16          Height: 25,
17        });
18
19        const base64data = reader.result;
20        await annot.setImageData(base64data); // Base64 URL or SVG
21
22        annotManager.addAnnotation(annot);
23        annotManager.redrawAnnotation(annot);
24      }
25      reader.readAsDataURL(imageBlob);
26    });
27  });

Element name: stamp

1<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">
2  <trn-custom-data bytes="{"trn-annot-maintain-aspect-ratio":"true","trn-unrotated-rect":"284.620,609.810,309.620,634.810"}"/>
3  <imagedata>...</imagedata>
4</stamp>

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

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

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

Gets or sets the height of the annotation.

Gets or sets the width of the annotation.

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 author of the annotation.

Gets or sets the annotation's stroke color.

Gets or sets whether the annotation is hidden.

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

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

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

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.

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.

Gets or sets if this annotation can be deleted.

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

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

Gets or sets if this annotation can be rotated.

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.

Gets or sets if this annotation scales with the page.

Gets or sets the opacity of the annotation.

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

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.

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

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.

1WebViewer(...)
2  .then(instance => {
3    const { annotationManager, Annotations } = instance.Core;
4
5    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
6      if (action === 'delete') {
7        annotations.forEach(async annot => {
8          if (annot instanceof Annotations.StampAnnotation) {
9            const imageData = await annot.getImageData();
10
11            const image = new Image();
12            image.width = annot.Width;
13            image.height = annot.Height;
14            image.onload = function() {
15              // Use image
16            };
17            image.src = imageData;
18          }
19        });
20      }
21    });
22  });

1WebViewer(...)
2  .then(instance => {
3    const { annotManager, Annotations } = instance.Core;
4
5    annotManager.on('annotationChanged', (annotations, action) => {
6      if (action === 'delete') {
7        annotations.forEach(annot => {
8          if (annot instanceof Annotations.StampAnnotation) {
9            const imageData = await annot.getImageData();
10
11            const image = new Image();
12            image.width = annot.Width;
13            image.height = annot.Height;
14            image.onload = function() {
15              // Use image
16            };
17            image.src = imageData;
18          }
19        });
20      }
21    });
22  });

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.

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, annotationManager, Annotations } = instance.Core;
4
5    documentViewer.addEventListener('annotationsLoaded', () => {
6      const annot = new Annotations.StampAnnotation({
7        PageNumber: 1,
8        X: 100,
9        Y: 50,
10        Width: 25,
11        Height: 25,
12      });
13
14      annot.setStampText('Hello World');
15
16      annotationManager.addAnnotation(annot);
17      annotationManager.redrawAnnotation(annot);
18    });
19  });

1WebViewer(...)
2  .then(instance => {
3    const { docViewer, annotManager, Annotations } = instance;
4
5    docViewer.on('annotationsLoaded', () => {
6      const annot = new Annotations.StampAnnotation();
7      annot.PageNumber = 1;
8      annot.X = 100;
9      annot.Y = 50;
10      annot.Width = 150;
11      annot.Height = 25;
12
13      annot.setStampText('Hello World');
14
15      annotManager.addAnnotation(annot);
16      annotManager.redrawAnnotation(annot);
17    });
18  });

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.