signature_pad 無紙化簽名
by ph822720355
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>無紙化簽名</title>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js "> </script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/example/css/signature-pad.css">
</head>
<body>
<div id="signature-pad" class="signature-pad">
<div class="description tc">簽名區域</div>
<div class="signature-pad--body">
<canvas id="signature-canvas"></canvas>
<i class="leftup lefta"></i>
<i class="leftup rightup"></i>
<i class="leftup leftdown"></i>
<i class="leftup rightdown"></i>
</div>
<div class="signature-pad--footer">
<button type="button" class="buttonclear clear" id="clear" data-action="clear">清除</button>
<button type="button" class="buttonclear clear" id="save" data-action="clear">確定</button>
</div>
</div>
</body>
<script type="text/javaScript">
var canvas = document.getElementById('signature-canvas');
var signaturePad = new SignaturePad(canvas, { backgroundColor: '#DEDEDE', penColor: 'rgb(0, 0, 0)' });
var saveButton = document.getElementById('save');
var cancelButton = document.getElementById('clear');
saveButton.addEventListener('click', function (event) {
// 簽名判斷是空
if(signaturePad.isEmpty()){
alert("不能為空")
}
// signaturePad.jSignature('getData');
var imgStr = signaturePad.toDataURL('image/png');
//獲取到image的base64，可傳到後端解析為圖片
//imgStr =...