Programmatically Fill Signature Field

Technical Support
1

I’ve looked through the examples and documentation, and cannot find a description of how to fill in a signature field programmatically. My use case is that I have a PDF with a signature field, and I would like to create a new “Type” signature with for example the name “John Doe”, and use that to fill in my signature field.

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Can I get some info on if this is possible or not? We’re looking to launch our application in the next couple of weeks, and this is an essential feature we need, so it’d be good to know if I’ll be able to implement this within that timeline, of if I should be looking into alternatives.

4

Hi there,

Sorry for the delay, i’m actually actively trying to find a solution as we speak. Unfortunately we don’t have any easy-to-use APIs for this, but it is possible - just trying to find the best approach. I’ll reply here shortly.

Logan

5

Hi there,

Sorry again for the delay. This was way more complicated than it should have been. We will be improving our APIs here soon.

Here is a function you can work with to add a signature to a field:

function drawAnnotationOnSignature(instance, annot, name) {
  const { Annotations, annotManager } = instance;

  // This section is to get the persons name as an image (using canvas)
  const canvas = document.createElement('canvas');
  const { Width, Height } = annot;
  canvas.width = Width;
  canvas.height = Height;

  const context = canvas.getContext('2d');

  // You can change the font here
  context.font = `${Height / 2}px Arial`
  
  // You can play around with these numbers (Height, Width, etc) to make the sig fit how you want
  context.fillText(name, 0, Height / 2, Width);
  const dataURL = canvas.toDataURL();

  // Now that we have the sig as base64, we can create the stamp:
  const stampAnnot = new Annotations.StampAnnotation();
  stampAnnot.PageNumber = 1;
  stampAnnot.X = annot.X;
  stampAnnot.Y = annot.Y;
  stampAnnot.Width = annot.Width;
  stampAnnot.Height = annot.Height;
  stampAnnot.PageNumber = annot.PageNumber;
  const keepAsSVG = false;
  stampAnnot.setImageData(dataURL, keepAsSVG);
  stampAnnot.Author = annotManager.getCurrentUser();
  annotManager.addAnnotation(stampAnnot);

  annot.innerElement.style.display = 'none';

  annot.annot = stampAnnot;
  annotManager.redrawAnnotation(stampAnnot);
}

The first parameter is just the WV instance, the second is the instance of the annotation you want to sign, and the third is the name you want to sign with.

Here is an example of it in use (this just signs all fields on the doc):

    const signatureWidgetAnnots = annotManager
      .getAnnotationsList()
      .filter(
        (annot) => annot instanceof Annotations.SignatureWidgetAnnotation
      );
    signatureWidgetAnnots.forEach((annot) => {
      drawAnnotationOnSignature(instance, annot, 'Logan Bittner')
    });

I hope this helps!

Thanks,
Logan