Creating an image from an annotation

[Matt Parizeau]

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

};

[sai]

I'm facing this error 

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

[Anthony Chen]

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

[sai]

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" ?>

<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">

<fields />

<add><square page="0" rect="176.41,438.778,435.65,611.278" color="#00A5E4" flags="print" name="acdcc02a-0495-0143-7f1b-00f21247c20a" title="Guest" subject="Rectangle" date="D:20210320004536+05'30'" interior-color="#FFFFFF" opacity="0.1" creationdate="D:20210320004536+05'30'"/></add>

<modify />

<delete>

<id page="0">906c161f-6b1a-33c3-59f2-fd6f9345eb71</id>

</delete>

</xfdf>

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

[sai]

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

On Saturday, March 20, 2021 at 12:20:44 AM UTC+5:30 Anthony Chen wrote:

[Diego Felix]

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.