如何开始在浏览器中添加可在PDF上填写的字段？(如电子签名)

Question

有一百万个网站提供电子签名，通常是让您在放置签名的PDF (或转换为PDF的文件)上绘制一个矩形。

我假设这是使用Canvas元素和AJAX将绘制矩形的位置发送回服务器。

我的非营利性组织已经使用了一个很棒的开源文档组装工具Docassemble。我想利用我们现有的表单库来允许与签名的直接集成。实际上，我已经构建了一个执行电子签名的Docassemble应用程序，但您需要在上传文件之前手动将字段放入文件中。将签名位置放在浏览器中会使它的性能成倍提高。不得不将其转给第三方可能超出了我们的支付能力，但也没有多大用处。

我不是一个新手程序员，但我从来没有使用过Canvas元素。我真的不知道从哪里开始这个项目。有什么建议吗？有没有什么库可以帮上忙？Docassemble是基于Python/Flask和Jquery构建的，但这看起来更像是一个通用的JavaScript问题。我见过这么多廉价的Docusign克隆版的这个功能，我想知道是不是有一个库是我的Google-fu找不到的。

Answer 1

看看https://github.com/szimek/signature_pad (live demo)，它没有外部deps。

PNG目录中的示例实现了一个Save PNG按钮，该按钮在用户的浏览器中下载一个PNG。我可以修改these lines from the example来调用我自己的上传函数：

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

此函数发出AJAX POST请求：

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));

现在，在我的/submit路由中，request.form['data']是一个inline image，它可以存储在数据库中，也可以直接呈现在<img>标记的src属性中。