Add Image Annotations to PDFs Using JavaScript

You can add images to your document using the Image Annotation API.

First, convert the image you want to use into a Blob. Here’s an example of how to do that with a remote image:

const request = await fetch("https://example.com/image.jpg");
const blob = await request.blob();

Now, you can use the instance#createAttachment method to convert it into an attachment that stores the image inside your PDF:

const imageAttachmentId = await instance.createAttachment(blob);

To display this image attachment in the PDF itself, create an image annotation with a MIME type, attachment, description, and bounding box.

Finally, call create so that the SDK updates with this new annotation:

const annotation = new PSPDFKit.Annotations.ImageAnnotation({
  pageIndex: 0,
  contentType: "image/jpeg",
  imageAttachmentId,
  description: "Example Image Annotation",
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 10,
    top: 20,
    width: 150,
    height: 150
  })
});
instance.create(annotation);

Adding a Button for Importing Image or PDF Files

When in Standalone mode, it’s possible to configure button form fields to open a dialog where the user can import a JPG, PNG, or PDF file from their device. The imported file is then added to a PDF, replacing the appearance of the button.

It’s possible to add this feature to your own buttons by setting the corresponding action property:

const widget = new PSPDFKit.Annotations.WidgetAnnotation({
  id: PSPDFKit.generateInstantId(),
  pageIndex: 0,
  formFieldName: "buttonIcon",
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 100,
    top: 200,
    width: 100,
    height: 100,
  }),
  action: new PSPDFKit.Actions.JavaScriptAction({
    script: "event.target.buttonImportIcon()",
  }),
  borderWidth: 0,
});
const formField = new PSPDFKit.FormFields.ButtonFormField({
  name: "buttonIcon",
  annotationIds: PSPDFKit.Immutable.List([widget.id]),
});
instance.create([widget, formField]);

Notice the event.target.buttonImportIcon() call in the JavaScript action. This is the method that triggers the image import dialog.