最近要做一個工單完成手動簽名送出的功能,上度娘一查,查到了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送出,背景轉化為圖檔儲存
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL5EzN3MTN1gDM3EjNwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)