[Html] 網頁版-無紙化簽名

最近剛好朋友遇到這個需求，簡單記錄一下。

線上範例: jsfiddle

<!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/signature_pad@2.3.2/dist/signature_pad.min.js "> </script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/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 = data:image/png;base64,iVBORw0K後面的部分iVBORw0KGgoAAAANSUhEUgAAAfgAAAL2CAYAAA......
        imgStr=imgStr.substring(22,imgStr.length);
        $.ajax({
            type: "POST",
            url: "",
            data:{
                imgStr:imgStr
            },
            dataType:"json",
            success: function(data){

            }
        });

    });
    cancelButton.addEventListener('click', function (event) {
        signaturePad.clear();
    });
    function resizeCanvas() {
        var ratio = Math.max(window.devicePixelRatio || 1, 1); // 清除畫布
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
        signaturePad.clear();
    }
    window.onresize = resizeCanvas;
    resizeCanvas();

</script>
</html>

方法名稱	使用方法	說明
clear	.jSignature("clear")	清空手寫簽名畫布
getData	.jSignature("getData", "base30")	獲得(轉換成)base64格式的數據資料，可以在網頁中顯示或將其保存到伺服器以生成圖片的方法
importData	.jSignature("importData",dataurl)	使用从上述的getData方法得到的數據URL重新設置jSignature畫布

參數名稱	說明	預設值
width	定義簽名畫布。支持%或px格式 (預設單位以畫布寬度的px為預設值)	250
height	定義簽名畫布。支持%或px格式 (預設單位以畫布高度的px為預設值)	150
color	定義簽名上筆跡的顏色。接受任何標準十六進制值	#000
background-color	定義簽名的背景顏色。接受任何標準十六進制值	#fff
lineWidth	定義簽名筆寬。接受任何有效的整數值 (也是簽名在移動設備上的筆寬)	1
cssclass	定義簽名的自定義css樣式	None