Getting signatures as images for history logs

Technical Support
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