Add Images 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);

We use cookies to improve your experience and for marketing. Learn more in our privacy policy.