はじめに
ここ数年、各種保険の契約や口座の開設等を店舗で行う機会が何度かあったのですが、昔ながらの紙とペンではなく、
タブレットからWebページを開き、入力していく方式が殆どでした。
その際、手書きのサインもタブレットから行うのですが、どの様に実装しているのか気になり調べてみたところ、
jQueryのjSignatureというプラグインを利用した方法が簡単に実現できそうだったので試してみました。
環境
jQuery 3.7.1
jSignature 2.1.3
デモ
See the Pen
Untitled by Kassy (@krxqpsog-the-typescripter)
on CodePen.
サンプルコード
<html>
<head>
<style>
#signature {
margin: 10px 0px;
border: 2px dotted #000;
width: 400px;
}
#signature-image {
margin: 10px 0px;
border: 1px solid #000;
width: 400px;
}
</style>
</head>
<body>
手書きサイン
<div id="signature"></div>
<button type="button" id="clear">クリア</button>
<button type="button" id="output-image">画像出力</button><br><br>
手書きサイン画像
<div id="signature-image"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>
<script>
$(function() {
// 初期化
$('#signature').jSignature();
// クリア処理
$('#clear').on('click', function () {
$('#signature').jSignature('clear');
});
// 画像出力処理
$('#output-image').on('click', function () {
const signatureImage = $('#signature-image');
signatureImage.empty();
const image = new Image();
image.src = $('#signature').jSignature('getData');
$(image).appendTo(signatureImage);
});
})
</script>
</body>
</html>※HTML、CSS、JSを纏めて記載している為、少々長く見えますが、メインとなるJSの部分は20行程度です。
おわりに
本来であれば、Canvasでゴリゴリ実装する必要がありそうですが、プラグインを利用した事で、
簡単に実装する事ができました。
jQuery自体が下火ではありますが、まだまだ現役の現場が多いと思いますので、導入も容易そうです。
