Я использую плагин jQuery Signature Pad Томаса Дж. Брэдли для захвата нарисованных подписей, и он работает хорошо. Я хотел бы также разрешить типизированные подписи, как показано в демо, но пусть он выводит те же данные, что и нарисованная подпись (представление JSON).
Поскольку выходные данные представляют собой фактические координаты курсора при его перемещении по холсту, я предполагаю, что ему придется эмулировать это движение мыши или касание. Я нашел еще один ответ Stackoverflow о рисовании текста на холсте. Есть ли способ эмулировать трассировку этого нарисованного текста? Если да, то это может быть одним из решений.
Обновлять
Я отказался от своего первоначального плана.
Поскольку моя конечная цель состояла в том, чтобы получить один и тот же результат при использовании напечатанной или нарисованной подписи, я решил использовать предоставленный метод getSignatureImage(). Однако метод getSignatureImage() работает только с нарисованной версией подписи. Я реализовал следующий код для рисования напечатанной подписи на временном холсте:
var canvas = $("canvas").get(0);
var ctx = canvas.getContext("2d");
// signature_name is the id of the input element
var tempCanvasHtml = '<canvas id="temp_canvas" style="display:none;" width="400" height="120"></canvas>';
$(".signature_form").append(tempCanvasHtml);
var tempCanvas = $("#temp_canvas").get(0);
var tempCtx = tempCanvas.getContext("2d");
tempCtx.font = "3.875em/50px 'Journal',Georgia,Times,serif";
tempCtx.fillStyle = '#145394';
tempCtx.fillText($("#signature_name").val(), 5, 90);
var img = tempCanvas.toDataURL("image/png");
tempCanvas.remove();
Я запускаю этот код, когда подпись принята или форма отправлена. Если подпись была нарисована, я использую getSignatureImage(), когда она напечатана, я использую приведенный выше код.
Примечание: использование этого кода создаст изображение без фона холста, что плагин не поддерживает с getSignatureImage(). Мне пришлось изменить плагин.
