Render page to image without annotations

Q: How can I render a page as an image URL without annotations?

A: You can easily do so by hiding or removing the annotations on the page, and then calling either Instance#renderPageAsImageURL() or Instance#renderPageAsArrayBuffer().

The following snippet uses a helper function to hide the annotations in the specified page, render it, and show the annotations again:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
async function renderPageWithoutAnnotations(pageIndex, width) {
  // Get page annotations
  const annotations = await instance.getAnnotations(pageIndex);
  // Hide page annotations
  await instance.update(
    annotations.map(annotation => annotation.set("noView", true))
  );
  // Render the page
  const imageURL = await instance.renderPageAsImageURL({ width }, pageIndex);
  // Show the annotations again
  await instance.update(
    annotations.map(annotation => annotation.set("noView", false))
  );
  // Return the rendered page image URL
  return imageURL;
}

// Usage example
// Render page without annotations, and width of 500px
// And append it to the body of the document
const imageURL = await renderPageWithoutAnnotations(0, 500);
const img = document.createElement("img");
img.src = imageURL;
img.style.position = "absolute";
img.style.top = "0";
instance.contentDocument.body.appendChild(img);

This has been tested with PSPDFKit for Web 2020.5.0