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.