描画された署名をキャプチャするために Thomas J. Bradley の jQuery Signature Pad プラグインを使用してきましたが、うまく機能します。私がやりたいことは、デモに示されているように型付き署名を許可することですが、描画された署名 (JSON 表現) と同じデータを出力することです。
データ出力はカーソルがキャンバス上を移動するときの実際の座標であるため、そのマウスまたはタッチの動きをエミュレートする必要があると思います。canvas にテキストを描画することに関する別の 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(). プラグインを変更する必要がありました。