Canvasによる簡易な署名機能を実装してみた
iPadによる手書き署名機能を作る機会があったので投稿します。
完成版
検証環境
- PC（Chrome, Edge）
- iPad, iPad Pro（Chrome, Safari）
追加実装
実際には署名画像データをサーバに保存まで作りました。
canvasデータは以下のように取得できます。
※取得データには不要な文字列が含まれているので除去処理が必要です。
test.js
// Canvasのデータをbase64でエンコードした文字列を取得
var canvasData = $('canvas').get(0).toDataURL();
// 不要な情報を取り除く
canvasData = canvasData.replace(/^data:image\/png;base64,/, '');
あとはサーバサイド側でデコードすれば画像変換できます。
// デコード
$image = base64_decode($imageData);
Storage::put('file_name.jpg', $image);
あとがき
PCで動くけどiPadで動かないなどjsの実装は工夫が必要でした。
文字の太さや色なども簡単に変更できるので便利ですね。
Author And Source
この問題について(Canvasによる簡易な署名機能を実装してみた), 我々は、より多くの情報をここで見つけました https://zenn.dev/t_takaji/articles/d626838351ed7a著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol