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の実装は工夫が必要でした。

// 【注意】クリックとタッチでx座標、y座標の取得方法が違う！
// PCの実装だとiPadで線が適切に引けない。

// PCのx座標、y座標の取得
let x = e.layerX - canvas.getBoundingClientRect().left
let y = e.layerY - canvas.getBoundingClientRect().top

// SPのx座標、y座標の取得
let x = e.touches[0].clientX - canvas.getBoundingClientRect().left;
let y = e.touches[0].clientY - canvas.getBoundingClientRect().top;

文字の太さや色なども簡単に変更できるので便利ですね。