html5实现手写签名板,点击保存签名,读取画布base64编码,转为二进制保存到数据库(直接保存base64字符串到数据库也行,我这边由于业务场景存储二进制方便其他项目组使用),用于电子文档签名
效果如下
html代码,直接使用H5自带的canvas,无需引入js
<!DOCTYPE html>
<!-- saved from url=(0056)http://hao2013.cn/canvas-special-master/brush/index.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="yiyuan.ico" type="image/x-icon" />
<link rel="shortcut icon" href="yiyuan.ico" type="image/x-icon"/>
<script type="text/javascript" src="js/jquery.js"></script>
<title>电子签名</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
.canvas {
/*width: 100%;*/
display: block;
border: 1px solid red;
}
#clear {
margin: 0 auto;
display: inline-block;
padding: 5px 10px;
width: 100px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
background: #e1e1e1;
border-radius: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
}
#save {
margin: 0 auto;
display: inline-block;
padding: 5px 10px;
width: 100px;
height: 40px;
line-height: 40px;
border: 1px solid #eee;
background: #e1e1e1;
border-radius: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
}
</style>
<input type="hidden" id="tjbh" value="${tjbh}">
<input type="hidden" id="signType" value="${signType}">
<body data-ext-version="1.4.2">
<div style="text-align: center">
<canvas id="canvas" width="400" height="200" style="border:1px solid #000000;">
您的浏览器不支持canvas技术,请升级浏览器!
</canvas>
<div>
<span id="clear">清空签名板</span>
<span id="save">保存签名</span>
</div>
</div>
</body>
<script type="text/javascript">
function WriteFont(id, options) {
var self = this;
this.canvas = document.getElementById(id);
var obj = {
canvas: this.canvas,
context: this.canvas.getContext("2d"),
isWrite: false, //是否开始
lastWriteTime: -1,
lastWriteSpeed: 0,
lastWriteWidth: 0,
canvasWidth: 400, //canvas宽高
canvasHeight: 200,
isShowBorder: true, //是否显示网格
bgColor: '#fff', //背景色
borderWidth: 2, // 网格线宽度
borderColor: "#fff", //网格颜色
lastPoint: {}, //
writeWidth: 2, //基础轨迹宽度
maxWriteWidth: 30, // 写字模式最大线宽
minWriteWidth: 1, // 写字模式最小线宽
writeColor: '#000', // 轨迹颜色
isWriteName:false //签名模式
}
for(var name in options) {
obj[name] = options[name];
}
/**
* 轨迹宽度
*/
this.setLineWidth = function() {
var nowTime = new Date().getTime();
var diffTime = nowTime - obj.lastWriteTime;
obj.lastWriteTime = nowTime;
var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;
if(returnNum < obj.minWriteWidth) {
returnNum = obj.minWriteWidth;
} else if(returnNum > obj.maxWriteWidth) {
returnNum = obj.maxWriteWidth;
}
returnNum = returnNum.toFixed(2);
//写字模式和签名模式
if(obj.isWriteName){
obj.context.lineWidth = obj.writeWidth;
}else{
obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;
}
}
/**
* 绘制轨迹
*/
this.writing = function(point) {
obj.context.beginPath();
obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
obj.context.lineTo(point.x, point.y);
self.setLineWidth();
obj.context.stroke();
obj.lastPoint = point;
obj.context.closePath();
}
/**
* 轨迹样式
*/
this.writeContextStyle = function() {
obj.context.beginPath();
obj.context.strokeStyle = obj.writeColor;
obj.context.lineCap = 'round';
obj.context.lineJoin = "round";
}
/**
* 写开始
*/
this.writeBegin = function(point) {
obj.isWrite = true;
obj.lastWriteTime = new Date().getTime();
obj.lastPoint = point;
self.writeContextStyle();
}
/**
* 写结束
*/
this.writeEnd = function() {
obj.isWrite = false;
}
/**
* 清空画板
*/
this.canvasClear = function() {
obj.context.save();
obj.context.strokeStyle = '#fff';
obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
if(obj.isShowBorder && !obj.isWriteName) {
obj.context.beginPath();
var size = obj.borderWidth / 2;
//画外面的框
obj.context.moveTo(size, size);
obj.context.lineTo(obj.canvasWidth - size, size);
obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
obj.context.lineTo(size, obj.canvasHeight - size);
obj.context.closePath();
obj.context.lineWidth = obj.borderWidth;
obj.context.strokeStyle = obj.borderColor;
obj.context.stroke();
//画里面的框
obj.context.moveTo(0, 0);
obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
obj.context.lineTo(0, obj.canvasHeight / 2);
obj.context.lineTo(0, obj.canvasHeight);
obj.context.lineTo(obj.canvasWidth, 0);
obj.context.lineTo(obj.canvasWidth / 2, 0);
obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
obj.context.stroke();
}
obj.context.restore();
}
/**
* 保存图片 格式base64
*/
this.saveAsImg = function() {
var image = new Image();
image.src = this.canvas.toDataURL("image/png");
if(image.src == this.emptyCanvas) {
alert('请先签名')
return;
}
if(!confirm("你确定提交当前的签名吗?")){
console.log("你确定提交当前的签名吗?-->NO");
return;
}
var base64Image=image.src;
console.log('提交的内容===>', image.src)
var params={
"tjbh":jQuery("#tjbh").val(),
"signType":jQuery("#signType").val(),
"picture":base64Image
}
jQuery.ajax({
url:"autoGraphAction_index_submitSign.do",
type:"post",
data:params,
dataType:"json",
success:function(data){
//alert("data:"+JSON.stringify(data))
if(data.code!=200){
alert(data.message);
return;
}
alert(data.message);
},
error:function(data,textStatus){
alert("网络连接错误,请稍后再试!");
}
});
};
/**
* 初始化画板
*/
this.canvasInit = function() {
this.canvas.width = obj.canvasWidth;
this.canvas.height = obj.canvasHeight;
this.emptyCanvas = this.canvas.toDataURL("image/png");
}
/**======================事件绑定===========================**/
this.canvas.addEventListener('mousedown', function(e) {
var point = {
x: e.offsetX || e.clientX,
y: e.offsetY || e.clientY
};
self.writeBegin(point);
});
this.canvas.addEventListener('mouseup', function(e) {
var point = {
x: e.offsetX,
y: e.offsetY
};
self.writeEnd(point);
});
this.canvas.addEventListener('mouseleave', function(e) {
var point = {
x: e.offsetX,
y: e.offsetY
};
self.writeEnd(point);
});
this.canvas.addEventListener('mousemove', function(e) {
if(obj.isWrite) {
var point = {
x: e.offsetX,
y: e.offsetY
};
self.writing(point);
}
});
//移动端
this.canvas.addEventListener('touchstart', function(e) {
var touch = e.targetTouches[0];
var point = {
x: touch.pageX || touch.clientX,
y: touch.pageY || touch.clientY
};
self.writeBegin(point);
});
this.canvas.addEventListener('touchend', function(e) {
var touch = e.changedTouches[0];
var point = {
x: touch.pageX,
y: touch.pageY
};
self.writeEnd(point);
});
this.canvas.addEventListener('touchmove', function(e) {
var touch = e.targetTouches[0];
var point = {
x: touch.pageX,
y: touch.pageY
};
self.writeEnd(point);
});
this.canvas.addEventListener('touchmove', function(e) {
var touch = e.targetTouches[0];
var point = {
x: touch.pageX,
y: touch.pageY
};
self.writing(point);
});
this.canvasInit();
this.canvasClear();
this.option = obj;
obj.control = {
clearCanvas: self.canvasClear
};
}
/**
* 初始化调用
* 设置参数
*/
var writeCanvas = new WriteFont('canvas', {
borderWidth: 10,
writeWidth:3,
borderColor: '#ff6666',
isWriteName:true //签名模式
});
document.getElementById('clear').onclick = function() {
writeCanvas.option.control.clearCanvas();
};
document.getElementById('save').onclick = function() {
writeCanvas.saveAsImg()
};
</script>
</html>
后台存储到数据库代码
public void submitSign(Map<String,Object> module, String tjbh, String signType, String pictrue) throws Exception{
Session session=null;
Connection conn=null;
PreparedStatement ps=null;
try{
session=sessionFactory.openSession();
conn=session.connection();
String base64Str=pictrue.replace("data:image/png;base64,","");
// System.out.println("base64Str:"+base64Str);
BASE64Decoder decoder = new sun.misc.BASE64Decoder();
byte[] byte_1= decoder.decodeBuffer(base64Str);
String deleteSql="delete from TJ_SIGN_PHOTO where TJBH=? and SIGNTYPE=? ";
session.createSQLQuery(deleteSql).setParameter(0,tjbh).setParameter(1,signType).executeUpdate();
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String insertSql="insert into TJ_SIGN_PHOTO(TJBH,SIGNTYPE,OPDATE,PICTURE)VALUES(?,?,?,?)";
ps=conn.prepareStatement(insertSql);
ps.setString(1,tjbh);
ps.setString(2,signType);
ps.setString(3,sdf.format(new Date()));
ps.setBytes(4,byte_1);
ps.execute();
module.put("code","200");
module.put("message","操作成功!");
}finally {
if(ps!=null){
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(session!=null){
session.close();
}
}
}