HTML5でサインを書かせるなら「Signature Pad 」で決まり!

GoogleAppsScript

みなさん,こんにちは.
シンノユウキ(shinno1993)です.

今回はHTML5のCanvasで文字を書けるようになるJavaScriptのプラグイン:「Signature Pad」を紹介します.外部のライブラリに依存しない,非常に使いやすいプラグインです.

では行きましょう!

「Signature Pad」とは?

Signature PadはHTML5のCanvas上にシグネチャー(サイン)を書けるようにするJavaScriptのライブラリです.JQueryなどの外部のライブラリがなくても動きますし,使い方も簡単なので非常に便利なライブラリです.公式サイトはこちら!

szimek/signature_pad
HTML5 canvas based smooth signature drawing. Contribute to szimek/signature_pad development by creating an account on GitHub.

 

基本的な使い方

CDNを使うと簡単!

CDNを使用すると簡単にSignature Padを使用することができます.以下のスクリプトタグをHeaderなどに入力してください.

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

準備はたったのこれだけ!

 

Canvasを用意してSignaturePadオブジェクトを生成!

まずはHTMLにCanvasを用意してください.以下のような感じでOKです.

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>signature</title>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
</head>
<body>
    <canvas width="560" height="280" style="border: 2px solid;"></canvas>
</body>
</html>

 

このCanvasに文字を書けるように設定しましょう.以下のスクリプトをbodyタグの前に追記してください.

<script>
    let canvas = document.querySelector("canvas");
    let signaturePad = new SignaturePad(canvas);
</script>

準備はこれだけ.もうCanvasに文字を書けるようになっています.

 

ちょっと発展した使い方

サインの色を変更する

サインの色を変更するためには,SignaturePadオブジェクトを生成した際に,連想配列でpenColorとbackgroundColorを指定してください.そうすることでペンの色や背景色を変更できます.

let canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas, {
    penColor: 'white',
    backgroundColor: 'black'
})

 

サインの太さを変更する

太さの変更も,オブジェクト生成時に連想配列で値を渡すことで実現します.

let canvas = document.querySelector("canvas");
const signaturePad = new SignaturePad(canvas, {
    minWidth: 6,
    maxWidth: 6,
})

 

リセットする

一度書いた画像をリセットしたい場合があるかと思います.それは

signaturePad.clear();

で実現できます.これをボタンなどから実行することでCanvasをリセットすることができます.

 

画像を保存する

書いたサインを保存したいという場合があるでしょう.その際は以下のコードを実行してください.

function saveCanvas() {
    let dataURL = signaturePad.toDataURL();
    console.log(dataURL);
}

これで画像のURLが取得できますので,そこから保存できます.

 

まとめ

今回はブラウザ上で簡単にサインが書けるJavaScriptのプラグイン:Signature Pad を紹介しました.すごく簡単に使えるので,ちょっとしたサインや絵を書いてもらう際には活用できるかと思います.ぜひお試しください.

 

 

タイトルとURLをコピーしました