1.調用jSignature插件生成手寫數字簽名
頭部記得先引用jquery，再引用jSignature的js檔案，html網頁源碼如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>signature_demo</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="../../js/jSignature.min.js"></script>
<!-- <script src="../../js/jquery.js"></script>-->
<!-- <script src="../../js/jSignature.js"></script>-->
<style type="text/css">
#signature{
position: absolute;
border: 5px solid red;
width: 90%;
height: 45%;
left: 5%;
top: 25%;
}
.clearBtn{
position: absolute;
width: 20%;
height: 10%;
left: 25%;
top: 80%;
}
.saveBtn{
position: absolute;
width: 20%;
height: 10%;
left: 55%;
top: 80%;
}
</style>
<script type="text/javascript">
//初始化畫布
$(document).ready(function(){
$("#signature").jSignature({width:"100%",height:"100%",color:"#000",lineWidth:4});
});
//重置畫布
function clearSig(){
$("#signature").jSignature("reset");
}
//将畫布内容儲存為base64編碼字元串
function saveImg(){
if( $("#signature").jSignature('getData', 'native').length === 0){
alert("請簽名後再送出！");
return;
}
var con=confirm("送出後不可更改，确認送出簽名？");
if(con===false) return;
//儲存将簽名的畫布儲存為base64編碼字元串
var sig=$("#signature");
var datapair=sig.jSignature("getData","image");
// $("#img").attr("src","data:"+ datapair[0] + "," + datapair[1]);
console.log(datapair[1]);
// $("#img").attr("src","data:"+sig.jSignature('getData'));
// console.log(sig.jSignature("getData"));
//封裝base64字元串，将其送出到後端
var postData={};
postData.imgStr=datapair[1];
$.post("http://localhost:8099/SignatureSave",postData,function (data) {
alert(data);
})
}
</script>
</head>
<body>
<div id="signature"></div>
<button class="clearBtn" onclick="clearSig()">重置</button>
<button class="saveBtn" onclick="saveImg()">擷取</button>
</body>
</html>
2.在後端接收到該base64字元串，再将其儲存為圖檔存入本地
這裡項目用的是springboot架構，源碼如下
package com.main.activity.demo;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import sun.misc.BASE64Decoder;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.UUID;
/**
* @author ：
* @description: TODO
* @date ：2019/10/10 19:53
*/
@RestController
public class SignatureDemo {
@PostMapping("/SignatureSave")
public String SignatureSave(String imgStr) throws IOException {
//使用uuid保證每次儲存的圖檔名稱唯一
UUID uuid =UUID.randomUUID();
//Base64解碼，生成.png圖檔
BASE64Decoder decoder = new BASE64Decoder();
byte[] decoderBytes = decoder.decodeBuffer(imgStr);
FileOutputStream out = new FileOutputStream(new File("E:/Desktop/Signature/"+uuid+".png"));
out.write(decoderBytes);
out.close();
System.out.println(uuid);
return "success";
}
}
這樣簽字的内容就儲存到了本地的E:/Desktop/Signature檔案夾下。
參考博文：
java實作base64字元串轉換png圖檔
手寫簽名插件—jSignature使用心得
jSignature開發執行個體
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)