jquery - jQuery Signature Pad：使用类型化版本获取 JSON 输出

Question

我一直在使用 Thomas J. Bradley 的 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(). 我不得不修改插件。