html 手寫簽名插件jSignature

最近要做一個工單完成手動簽名提交的功能，上度娘一查，查到了jSignature插件。

1.在我們的代碼中引入jSignature.min.js。插件代碼（並且引入jquery）

2.html 代碼

<li style="margin-top:20px;">
    <label style="display:inline-block;margin-bottom: 5px;">巡檢人手寫簽名：</label>
    <div id="canvas">	
    </div>
    <button id="canvasBtn" type="button" onclick="savePic()">完成</button>
	<button type="button" onclick="resetCanvas()">清除</button>
</li>

3.jquery代碼

<script>
    $(function(){
        //畫布初始化 transparent去除初始化的下劃線
        //lineWidth 設置畫筆粗細爲2
        $("#canvas").jSignature({width:'100%',height:300,"decor-color": "transparent",lineWidth: '2'});
    });
    //輸出簽名圖片
    function savePic(){
        var $sigdiv = $("#canvas");
        var length = $sigdiv.jSignature('getData', 'native').length;
        //判斷是否有簽名
        if(length == 0){
            layer.msg('請先簽名再提交',{icon:5});
            return;
        }
        //因爲需要保存爲圖片，此處不用
        //var datapair = $sigdiv.jSignature("getData", "svgbase64")；
        //採用圖片形式
        var datapair = $sigdiv.jSignature("getData");
        //若採用svg使用
        //var i = new Image();
        //i.src = "data:" + datapair[0] + "," + datapair[1];
        $('#canvas').html("<img src='"+datapair+"'>");
        $('#canvasBtn').text('重寫');
        $('#canvasBtn').attr('onclick','getCanvas()');
    }
    function getCanvas(){
        $("#canvas").html("");
        $("#canvas").jSignature({width:'100%',height:300,"decor-color": "transparent",lineWidth: '2'});
        $('#canvasBtn').text('完成');
        $('#canvasBtn').attr('onclick','savePic()');
	}
    function resetCanvas(){
        var $sigdiv = $("#canvas");
        $sigdiv.jSignature("reset");
    }
 
</script>

4.提交直接把base64 image提交，後臺轉化爲圖片保存