# Getting signatures as images for history logs

**URL:** <https://pdfjs.community/t/getting-signatures-as-images-for-history-logs/438>\
**Category:** Technical Support\
**Created:** [January 7, 2021, 7:16pm UTC](https://pdfjs.community/t/getting-signatures-as-images-for-history-logs/438 "2021-01-07T19:16:33Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [January 8, 2021, 11:09pm UTC](https://pdfjs.community/t/getting-signatures-as-images-for-history-logs/438/2 "2021-01-08T23:09:35Z")

</div>

Hey Eric!

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

```javascript
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](https://pdfjs.express/api/CoreControls.AnnotationManager.html#getAnnotationById__anchor) API.

You could also listen to the [annotationChanged](https://pdfjs.express/api/CoreControls.AnnotationManager.html#event:annotationChanged__anchor) event and listen for when a signature annotation is added:

```javascript
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

---

_[View the full topic](https://pdfjs.community/t/getting-signatures-as-images-for-history-logs/438)._