Creating an image from an annotation


How can I generate an image of an annotation that is loaded in WebViewer?


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();