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:
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