问题
I've been using Thomas J. Bradley's jQuery Signature Pad plugin for capturing drawn signatures and it works well. What I'd like to do is also allow typed signatures as shown in demo but have it output the same data as a drawn signature (JSON representation).
Since the data output is actual coordinates of the cursor as it moves over the canvas, I'm guessing it would have to emulate that mouse or touch movement. I found another Stackoverflow answer about drawing text on the canvas. Is there a way to emulate the tracing of that drawn text? If so, that might be one solution.
Update
I gave up on my original plan.
Since my end goal was to get the same output whether using a typed or drawn signature, I decided to use the provided getSignatureImage() method. However, the getSignatureImage() method only works with the drawn version of a signature. I implemented the following code to "draw" a typed signature onto a temporary canvas:
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();
I run this code when the signature is accepted or the form is submitted. If the signature was drawn I use getSignatureImage(), when it's typed I use the above code.
Note: using this code will produce an image without the canvas background, something that the plugin doesn't support with getSignatureImage(). I had to modify the plugin.
来源：https://stackoverflow.com/questions/26486560/jquery-signature-pad-get-json-output-using-typed-version