最近要做一個工單完成手動簽名提交的功能，上度娘一查，查到了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提交，后臺轉化為圖片保存

總結

以上是生活随笔為你收集整理的html 手写签名插件jSignature的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。