Render a page to an image without annotations

You can render a page as an image URL without annotations 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 on the specified page, render it, and show the annotations again:

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 with a width of 500px.
// 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 Nutrient Web SDK 2020.5.0.