我一直在使用Thomas J. Bradley的jQuery Signature Pad插件捕获绘制的签名，效果很好。我想做的还是允许键入的签名as shown in demo，但是它输出的数据与绘制的签名（JSON表示）相同。
由于数据输出是光标在画布上移动时的实际坐标，我猜它必须模拟鼠标或触摸移动。我发现了另一个Stackoverflow answer about drawing text on the canvas。有没有办法模拟绘制文本的跟踪？如果是这样，那可能就是一个解决方案。
我放弃了原来的计划。
由于我的最终目标是使用输入或绘制的签名获得相同的输出，我决定使用提供的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()。我必须modify the plugin。