Adding annotations to images using JavaScript

This guide shows you how to annotate images in Nutrient Web SDK. The process involves converting an image to a PDF, configuring annotation tools and the user interface (UI) to display only relevant options, and extracting the image data upon saving.

Try for free Launch demo

Loading image documents

To load an image as a document in Nutrient Web SDK, use the PSPDFKit#load() method. You can pass a blob, an array buffer, or a URL to the document option, and the SDK will treat the image as a PDF document:

PSPDFKit.load({
  document: image
});

For more information on loading options, see our guides on importing a PDF document.

Adding images as annotations

You can annotate images using the annotation API provided by the SDK. Below is an example of how to create an image annotation and add it to a document:

const request = await fetch("https://example.com/image.jpg");
const blob = await request.blob();
const imageAttachmentId = await instance.createAttachment(blob);
const annotation = new PSPDFKit.Annotations.ImageAnnotation({
  pageIndex: 0, // The page to place the annotation on.
  isSignature: true, // Indicates this is a signature annotation.
  contentType: "image/jpeg", // MIME type of the image.
  imageAttachmentId, // Reference to the attached image.
  description: "Example Image Annotation", // Annotation description.
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 10, // Left coordinate.
    top: 20, // Top coordinate.
    width: 150, // Annotation width.
    height: 150 // Annotation height.
  })
});

instance.create(annotation);

The example above fetches an image, attaches it to the document, and places it on the specified page. For more details on creating annotations, refer to the guide on how to create PDF annotations.

Exporting image documents

Once your annotations are complete, you can export the image document as a PDF using the Instance#exportPDF() method. This enables you to download the file, as explained in the save a document to local storage guide.