# 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:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![eric](https://avatars.discourse-cdn.com/v4/letter/e/898d66/32.png) [@eric](https://pdfjs.community/u/eric)\
**Post date:** [January 7, 2021, 7:16pm UTC](https://pdfjs.community/t/getting-signatures-as-images-for-history-logs/438/1 "2021-01-07T19:16:33Z")

</div>

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

---

<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

---

<div class="post-metadata">

**Author:** ![eric](https://avatars.discourse-cdn.com/v4/letter/e/898d66/32.png) [@eric](https://pdfjs.community/u/eric)\
**Post date:** [January 11, 2021, 9:03pm UTC](https://pdfjs.community/t/getting-signatures-as-images-for-history-logs/438/3 "2021-01-11T21:03:00Z")

</div>

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](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/db90930ce11aa2ad3a4c1065c88ab2ef92ff9a4d.png)

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

---

<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 12, 2021, 8:07pm UTC](https://pdfjs.community/t/getting-signatures-as-images-for-history-logs/438/4 "2021-01-12T20:07:25Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/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