Q:
How can I generate an image of an annotation that is loaded in WebViewer?
A:
You can use the annotation’s draw function to draw it on a canvas and then use the toDataURL function to get it as an image. The paddingSize optionally allows you to add some space around the annotation. For example:
function generateAnnotationImage(annotation, paddingSize) {
paddingSize = paddingSize || 0;
const canvas = document.createElement(‘canvas’);
canvas.width = annotation.Width + (2 * paddingSize);
canvas.height = annotation.Height + (2 * paddingSize);
const ctx = canvas.getContext(‘2d’);
ctx.translate(-annotation.X + paddingSize, -annotation.Y + paddingSize);
const pageMatrix = instance.docViewer.getDocument().getPageMatrix(annotation.PageNumber);
annotation.draw(ctx, pageMatrix);
return canvas.toDataURL();
};