Как начать добавлять поля в браузере, которые можно заполнить в 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.

В примере в каталоге docs/ реализована кнопка Save PNG, котораязагружает PNG в браузере пользователя.Мне удалось изменить эти строки из примера , чтобы вместо этого вызывать мою собственную функцию загрузки:

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'] находится встроенное изображение , которое затем можно сохранить в базе данных или отобразить непосредственно в атрибуте src тега <img>.