【Javascript】SignaturePad を使ってブラウザ上でサインを書けるようにする

Javascript, 開発

おはようございます。

昨日は束の間の曇天でしたね。
天気予報をみるとまた今日からしばらく雨天が続き少し憂鬱になりますが、
あまり暑い感じでもないのでまあよかったです。

今日はちょっと便利な Javascript ライブラリの紹介。

スポンサーリンク

SignaturePad(シグネチャーパッド)

ポーランドの szimek@Github さんが開発した、簡単に Canvas 上にサインを書けるようにしてくれる Javascriptライブラリ。

早速、サンプルのプログラムを書いて試してみました。

文字色や背景色、文字の太さなんかも変えられるし、画像として保存するのも簡単にできました。

プログラム

画面

style/css

 

html

sampleSign.html

 

スクリプト

script/sampleSign.js

 

起動してみる

起動後の画面
起動後の画面

文字色、背景色、線の太さを変更できるようにしました。

文字を書いてみる
文字を書いてみる

ひとまず文字を書いてみた感じ。

イメージの保存
イメージの保存

保存ボタンをクリックすると、画像として保存し、更に下部のCanvasで画像の読み込みをします。

背景、文字色の変更
背景、文字色の変更

背景をグリーン、文字色をホワイトに変更。

線の太さを変更
線の太さを変更

線の太さを変更。

まとめ

WEB上でサイン(大体はスマホやタブレット用になりそうですが)が必要なシステムに簡単に組み込めそうです。

他にも、Canvas上にサインが書かれているかどうかを判定する「isEmpty」といった関数まで用意されているので便利ですよ。

実際にサーバーに送信して画像イメージとして保存してもいいですし、ローカルストレージなんかに保存してもいいですね。(そこまで試す予定はありません)

何かのお役に立てれば。

ではでは。

 

スポンサーリンク


関連するコンテンツ

Javascript, 開発Javascript

Posted by doradora