使用jSignature生成手写数字签名并保存为图片
聂和宜
1.调用jSignature插件生成手写数字签名
头部记得先引用jquery，再引用jSignature的js文件，html网页源码如下：
<!DOCTYPE html>
<html lang="en">
<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文件夹下。
参考博文：
类似资料：