How to get started adding fields in-browser that can be filled in on a PDF? (Like e-signature)

Question

There are a million websites that offer e-signatures, usually by letting you draw a rectangle on a PDF (or file that is converted to a PDF) where the signature will be placed.

I assume that this is using the Canvas element and AJAX to send the location where the rectangle was drawn back to the server.

My nonprofit already uses a great open source document assembly tool called Docassemble. I'd like to leverage our existing form library to allow for direct integration with signatures. I actually already built a Docassemble app that does e-signing, but you need to manually place the fields in the file before uploading it. Placing the signature location in-browser would make it exponentially better. Having to pass it off to a third-party is probably more than we can pay for but also would be much less useful.

I'm not a novice programmer but I've never used the Canvas element. I really don't know where to start with this project. Any advice? Are there any libraries that would help? Docassemble is built on Python/Flask with Jquery but this seems mostly like a generic JavaScript question. I have seen so many cheap Docusign clones with this feature that I wonder if there's a library that I can't find with my Google-fu.

Answer 1

Have a look at https://github.com/szimek/signature_pad ( live demo ) which has no external deps.

The example in the docs/ directory implements a Save PNG button which downloads a PNG in the user's browser. I was able to modify these lines from the example to instead call my own upload function:

var dataURL = signaturePad.toDataURL();
// download(dataURL, "signature.png");
upload(dataURL)

This function makes the AJAX POST request:

function upload(data){
  xhr = new XMLHttpRequest();
  xhr.open('POST', '/submit');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
      if (xhr.status === 200) {
          alert('Data submitted: ' + xhr.responseText);
      }
      else if (xhr.status !== 200) {
          alert('Request failed.  Returned status of ' + xhr.status);
      }
  };
  xhr.send(encodeURI('data=' + data));

Now in my /submit route request.form['data'] is an inline image which can then be stored in the database, or rendered directly in the src attribute of an <img> tag.