JS实现电子签名
最近在做一个在线考核的项目,其中有一个需求是考核完毕后在录入成绩时需要进行签名,签名后要在表单显示出来并且进行成绩单的打印
其实思路已经很明显了。
1.第一步先生成画板
2.第二步在画板中进行签名写字
3.第三步点击提交上传图片(base64编码)到服务器
4.第四步服务器接收后转码转成图片(png/img)后,先存到本地静态资源服务器
5.把地址信息存到数据库中
思路大概就是这个思路,有个细节就是在转码转成图片时,如果转成img格式的那么背景就会是黑色的,像这样
达不到电子签名的效果,所以要转成png格式的图片
那么直接开始吧,不墨迹直接放代码
1.生成画板,签名写字,上传图片
drawing.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>电子画板</title>
<link href="css/drawing/mui.min.css" rel="stylesheet" />
<script type="text/javascript" src="css/drawing/mui.min.js"></script>
<script type="text/javascript" src="css/drawing/jquery.min.js"></script>
<script type="text/javascript" src="css/drawing/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="css/drawing/flashcanvas.js"></script>
<![endif]-->
</head>
<body>
<h3>请在下方签名</h3>
<div id="signature" style="height: 100%;"></div>
<br>
<input id="clear" type="button" value="清除">
<input id="export" type="button" value="输出图片">
<input id="save" type="button" value="上传图片">
<div id="pic">
</div>
<p id="base" style="width:100%;"></p>
<script type="text/javascript" src="js/drawing.js" charset="utf-8"></script>
</body>
</html>
drawing.js
mui.plusReady(function() {
plus.screen.lockOrientation('landscape-secondary');
});
$(document).ready(function() {
$("#signature").jSignature()
});
document.getElementById("clear").addEventListener('tap', function() {
$("#signature").jSignature("reset");
$("#pic")[0].innerHTML = '';
});
document.getElementById("save").addEventListener('tap', function() {
var datapair = $("#signature").jSignature("getData", "image");
var array = datapair.splice(",");
$.ajax({
url: "/Login/ceshi",//接口方法
type: "POST",
data: {pp:array[1]},
success: function (data) {
console.log(data);
}
});
console.log(array[1])
mui.toast(array[1]);
});
document.getElementById("export").addEventListener('tap', function() {
var datapair = $("#signature").jSignature("getData", "image");
i = new Image();
i.src = "data:" + datapair[0] + "," + datapair[1];
console.log(i)
// dataURLtoFile(i.src,"我是是")
$(i).appendTo($("#pic"));
});
需要的css、js文件
mui.min.css
mui.min.js
jquery.min.js
jSignature.min.js
css/drawing/flashcanvas.js
文件下载地址 :下载地址(如果未找到,说明审核未过,加我qq技术交流群:1031848061(里面有))
2.服务器接收base64编码进行转译 转译后存到本地服务器
@PostMapping("/ceshi")
public int ceshi(FailPojo failPojo) {
BufferedImage image = null;
byte[] imageByte = null;
try {
imageByte = DatatypeConverter.parseBase64Binary(failPojo.getPp());
ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
image = ImageIO.read(new ByteArrayInputStream(imageByte));
bis.close();
String name=System.currentTimeMillis()+new Random().nextInt(999999)+".png";
String fileName = studentService.serviceloc().get("computername")+name;
File outputfile = new File(fileName);
ImageIO.write(image, "png", outputfile);
} catch (IOException e) {
e.printStackTrace();
}
return 0;
}
3.把服务器的路径存到数据库中
这里就不演示了,就是走个方法把路径存到数据库中。
效果展示
画板
抱歉字有点丑将就看
存到了我本地服务器中。
最后把文件的服务器地址放到特定的成绩单中就实现了电子签名功能!