Getting signatures as images for history logs

Technical Support
1

Is it possible to get the created signatures in an image format?

Once a user signs a document I would like to essentially list their signatures at the top of the webpage showing each signature (as an image) and the exact time it was created.

Essentially is it possible to get the signature objects, and show them as images outside of PDFJS express so I can give my users a history with images of each signature being placed.

Thanks,
Eric Greavette

2

Hey Eric!

You can use this function to get a base64 image from an annotation.

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

To use this function, you just need to get reference to the annotation you want to capture.

If you know the annotations ID, you can use the getAnnotationById API.

You could also listen to the annotationChanged event and listen for when a signature annotation is added:

WebViewer(...).then(instance => {
   const { annotManger, Annotations } = instance;

  annotManger.on('annotationChanged', (annots) => {

   const changedAnnot = annots[0];

   if(changedAnnot instanceof Annotations.SignatureWidgetAnnotation) {
      const base64 = generateAnnotationImage(changedAnnot.annot)
      // save the image
   }

  })
  
})

I hope this helps! Let me know if there is anything I can clarify further.

Thanks,
Logan

1 Like
3

Hello Logan,

This is great thank you.

Is there a way to increase the resolution of the image?
My plan was to double the height and width, then draw it to the canvas then reset it back to the original state.

But for example when I add a stamp, and increase the Height and Width programmatically it will resize to fill properly but when I change a signature Height and Width programmatically it will not resize properly.

image

As you can see it doesn’t fill in the whole resized annotation, doing this on a stamp will fill it in though.

Thanks,
Eric Greavette

4

Hey there,

To scale up the image you can just scale up the canvas context in the generateAnnotationImage function we provided.

You can use the scale function on the canvas context to scale up or down the image. To double the resolution you would do ctx.scale(2,2)

You could also set the width and height of the context to set it to whatever resolution you like.

Thanks!
Logan