Adding Annotations to Images Using JavaScript

While it has always been possible to annotate images in PSPDFKit, doing so previously required some extra code. You had to convert an image to PDF, be sure to update the annotation tools and UI to only show relevant options, and extract the image data back when a save occurred.

Launch Demo

ℹ️ Note: This feature requires the Image Documents component to be enabled in your license.

Loading Image Documents

When calling PSPDFKit#load() and passing a blob, array buffer, or URL to the image into the document option, PSPDFKit for Web will open the image file as if it were a PDF document:

PSPDFKit.load({
  document: image
});

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

Adding Images as Annotations

You can create annotations on the client using our Annotation API. Below is an example of how to create a basic 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,
  isSignature: true,
  contentType: "image/jpeg",
  imageAttachmentId,
  description: "Example Image Annotation",
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 10,
    top: 20,
    width: 150,
    height: 150
  })
});

instance.create(annotation);

For more information on creating annotations, refer to the relevant guide.

Exporting Image Documents

Image documents can be exported as PDF documents by using Instance#exportPDF() and triggering a download, as explained in the Save a Document to Local Storage guide.