Creating an image from an annotation

Technical Support WebViewer
1

I’m facing this error

Unhandled Rejection (TypeError): annotation.draw is not a function

2

Hi Sai,

Can you provide a bit more code snippet for what you mean along with what kind of annotation you are working with?

Thanks,
Anthony Chen

3

I’m saving the annotes by crop tool by

annotManager.exportAnnotCommand().then(e => {
console.log(e)
setDataUrl(generateAnnotationImage(e, 0))
})

Sample Annote:

<?xml version="1.0" encoding="UTF-8" ?>





906c161f-6b1a-33c3-59f2-fd6f9345eb71

and want to convert the annotes to image by above function

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

but I get this error

Unhandled Rejection (TypeError): annotation.draw is not a function

Framework: React 17
PdfViewer: v7

4

I am saving annotes by crop tool

annotManager.exportAnnotCommand().then(e => {
console.log(generateAnnotationImage(e, 0))
setSelectedAnnots(e)
})

I want to convert the annots to image by

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

But I get an error when I try this function

Unhandled Rejection (TypeError): annotation.draw is not a function

React v17
Pdftron v7

5

Hello, Sai.

I believe the issue is that you are not passing an actual annotation to generateImage. AnnotCommands don’t have a draw method. Could you try passing an annotation object to generateImage and let me know how it works for you?

Best Regards,
Diego Felix
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

CONFIDENTIALITY NOTICE: This message (and any attachment to it) is intended only for the use of the individual or entity to which it is addressed in the header, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. Any reproduction, distribution, modification or use of the contents of this message (and any attachment to it) by any individual or entity other than the intended recipient is prohibited. If you have received this communication in error, please notify us immediately and delete the original.