Customizing Stamp Annotations

Try for Free Launch Demo

To change the default stamp annotation templates available in the stamp picker UI, you can modify PSPDFKit.defaultStampAnnotationTemplates and pass the modified Array in the PSPDFKit.load function call:

var stampAnnotationTemplates = PSPDFKit.defaultStampAnnotationTemplates;
stampAnnotationTemplates.push(
  new PSPDFKit.Annotations.StampAnnotation({
    stampType: "Custom",
    title: "My custom text",
    color: new PSPDFKit.Color({ r: 0, g: 0, b: 64 }),
    subtitle: "my custom subtitle",
    boundingBox: new PSPDFKit.Geometry.Rect({
      left: 0,
      top: 0,
      width: 300,
      height: 100
    })
  })
);
PSPDFKit.load({ stampAnnotationTemplates: stampAnnotationTemplates });

const stampAnnotationTemplates = PSPDFKit.defaultStampAnnotationTemplates;
const stampAnnotationTemplates.push(new PSPDFKit.Annotations.StampAnnotation({
  stampType: "Custom",
  title: "My custom text",
  color: new PSPDFKit.Color({ r: 0, g: 0, b: 64 }),
  subtitle: "my custom subtitle",
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 0,
    top: 0,
    width: 300,
    height: 100
  })
}));
PSPDFKit.load({ stampAnnotationTemplates });

Tip: You can get the current list of stamp annotation templates available in a loaded instance from Instance#stampAnnotationTemplates.

Stamp picker dialog with a custom set of default stamps

Add Image Annotations to the Stamp Annotation Templates

PSPDFKit supports stamp annotation templates generated from an image annotation. These annotations are still image annotations, but they can be added to the stamp picker UI as well:

var imageURL = "https://example.com/image.png";
fetch(imageURL)
  .then(function(response) {
    return response.blob();
  })
  .then(function(file) {
    instance.createAttachment(file).then(function(imageAttachmentId) {
      var imageAnnotation = new PSPDFKit.Annotations.ImageAnnotation({
        imageAttachmentId: imageAttachmentId,
        contentType: "image/png",
        description: "Example",
        boundingBox: new PSPDFKit.Geometry.Rect({
          width: 300,
          height: 200,
          top: 0,
          left: 0
        })
      });
      instance.setStampAnnotationTemplates(function(stampAnnotationTemplates) {
        stampAnnotationTemplates.push(imageAnnotation);
        return stampAnnotationTemplates;
      });
    });
  });

(async () => {
  const imageURL = "https://example.com/image.png";
  const file = await fetch(imageURL).then(response => response.blob());
  const imageAttachmentId = await instance.createAttachment(file);
  const imageAnnotation = new PSPDFKit.Annotations.ImageAnnotation({
    imageAttachmentId,
    contentType: "image/png",
    description: "Example",
    boundingBox: new PSPDFKit.Geometry.Rect({
      width: 300,
      height: 200,
      top: 0,
      left: 0
    })
  });
  instance.setStampAnnotationTemplates(stampAnnotationTemplates => [
    ...stampAnnotationTemplates,
    imageAnnotation
  ]);
})();