Customizing stamp annotations

Try for free Launch demo

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

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

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

Nutrient 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 NutrientViewer.Annotations.ImageAnnotation({
        imageAttachmentId: imageAttachmentId,
        contentType: "image/png",
        description: "Example",
        boundingBox: new NutrientViewer.Geometry.Rect({
          width: 300,
          height: 200,
          top: 0,
          left: 0
        })
      });
      instance.setStampAnnotationTemplates(function(stampAnnotationTemplates) {
        stampAnnotationTemplates.push(imageAnnotation);
        return stampAnnotationTemplates;
      });
    });
  });