PDFTRON - Export FreeHandAnnotation Signature as image

Question

I am using https://www.pdftron.com/ for digital signing of pdf documents together with Angular v10. They have really good documentation so I managed to do almost everything I wanted. The only thing that bothers me is that I cannot export signature as an image when using drawing method. Here is the signature tool that the library offers https://www.pdftron.com/documentation/web/guides/signature-tool/. For the other available methods, exporting signature as an image is really straightforward as annot field of the annotation has image property.

The Drawing method returns FreeHandAnnotation ( https://www.pdftron.com/api/web/Annotations.FreeHandAnnotation.html ) object.
Is it even possible to export this as an image ?

score 2 · Accepted Answer · answered Nov 05 '20 at 08:33

Here a code sample of extracting an image from a freehand annotation

WebViewer({
  // sample file I use
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  // rest of your configurations
  }, document.getElementById('viewer')
).then(instance => {
  const { annotManager, docViewer, Annotations } = instance;
  docViewer.on('annotationsLoaded', async function() {
    // get an annotation you want to extract
    const freeHandAnnot = annotManager.getAnnotationsList().filter(a => a instanceof Annotations.FreeHandAnnotation)[0];
    const canvas = document.createElement('canvas');
    const pageMatrix = docViewer.getDocument().getPageMatrix(freeHandAnnot.PageNumber)

    canvas.height = freeHandAnnot.Height;
    canvas.width = freeHandAnnot.Width;
    const ctx = canvas.getContext('2d');


    // Since the annotation will be drawing at (X,Y) , use ‘translate’, so it’s start at 0,0 instead
    ctx.translate(-freeHandAnnot.X, -freeHandAnnot.Y);
    freeHandAnnot.draw(ctx, pageMatrix);

    // can also use toBlob()
    console.log(canvas.toDataURL())
  });
});

Please let me know if it works for you

score 1 · Answer 2 · answered Oct 29 '20 at 16:51

1

You can filter signature annotations like the following

docViewer.getAnnotationManager().getAnnotationsList().filter(a => a.Subject === "Signature");

After you get the signature you want to draw, you can create a temp canvas element and use the "draw" method to draw the signature onto it. https://www.pdftron.com/api/web/Annotations.FreeHandAnnotation.html#draw__anchor

After you can use "toDataURL" (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) to extract the image from the canvs.

Please let me know if the above helped or if you need more details.

Best Regards

answered Oct 29 '20 at 16:51

Andrew Yip

121
2

Sorry did not have time to come back to this earlier. I've tried what you suggested, but nothing is drawn to the canvas. `@ViewChild('canvas', { static: true }) canvas: ElementRef; ctx: CanvasRenderingContext2D;` In ngOnInit method() I do following: `this.ctx = this.canvas.nativeElement.getContext('2d');` Finally, I call draw method like this: `annotation.draw(this.ctx, docViewer.getDocument().getPageMatrix(annotation.getPageNumber()))` – user777 Nov 04 '20 at 08:30

PDFTRON - Export FreeHandAnnotation Signature as image

2 Answers2