html5实现手写签名板，用于电子文档签名
2024-06-04 02:47:03
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();}}}html5实现手写签名板，用于电子文档签名相关推荐
- html5 canvas手写画板 下载图片至本地
html5 canvas手写画板 下载图片至本地 <!DOCTYPE html> <html><head><meta charset="utf-8& ...
- 如何插入电子签名_如何在电子文档上签名？可靠电子签名的特征有哪些？
如何在电子文档上签名?可靠电子签名的特征有哪些? 在电子文档上签名很简单.举例来说, 如果我们想在word文件中插入签名,方法如下: 用扫描仪.相机或手机对手写签名进行扫描或拍摄,并通过PS或其他图片 ...
- iStylePDF安全电子文档解决方案之评标报告专家签字
所谓评标,是指按照规定的评标标准和方法,对各投标人的投标文件进行评价比较和分析,从中选出最佳投标人的过程.目前很多地方已经实现电子化招投标,评标结束后需要出具评标报告也电子化,势必评标专家必须在评标报 ...
- iStylePDF安全电子文档解决方案之电子合同在线订立
对于许多企业和政府机构而言与客户.合作方.委托人进行妥善的文件交换对他们的成功起着至关重要的作用.由于这些企业必须依靠快速并简单的信息共享于是他们开始将基于文档的业务流程放到网上以提升其运营的质量.效 ...
- 如何用Django实现简易电子文档管理系统
这是一个简易的电子文档管理系统,可以实现通过下拉列表获取相应的文档资料,也可以删除文档. 首先我们需要在models.py中写两个类 一个是下拉列表中需要的内容,另一个则是form表单里需要的数据. ...
- Aed电子文档与无纸化办公
Aed电子文档与无纸化办公 一.当前阻碍无纸化办公的根本原因 十几年来人们怀着极大的热情,投入了大量资金,来研发.建设和使用计算机办公系统.然而,十几年过去了,人们看到的却是电子文档和纸质文档并行.纸 ...
- 如何用手机把纸质便签的文字转变成电子文档
在信息爆炸的时代,如果要记录一些信息,依然有人喜欢用纸质的便签.拿出随身携带的笔记录在便签纸上,贴在什么地方或者放在自己容易找到的地方,想看的时候拿出来看看.不过随着记录的信息越来越多,用户会发现纸质 ...
- 采用WPF技术，开发OFD电子文档阅读器
前言 OFD是国家标准版式文档格式,于2016年生效.OFD文档国家标准参见<电子文件存储与交换格式版式文档>.既然是国家标准,OFD随后肯定会首先在政务系统使用,并逐步推向社会各个方面. ...
- 【电子文档】大批量电子文档的自动化生成 - 第一版
如何在系统中,进行大批量电子文档的自动化生成,是一项非常关键的功能.我将以VDPSOFT的StarForm系统为例,介绍如何从模板设计,到大批量电子文档的自动化生产. 一: 常见的电子文档类型: 1 ...
- 公文转成电子文档需要注意的事项
事业单位之间会互相传发一些公文,接收单位会对公文进行分析,并给出解决方案,涉及到把公文转成电子文档,目前通过人工敲字实现. 转成电子文档后,需要做好版本管理,几月几号那个部门的文档,几月几日接受了什么 ...
最新文章
- java课堂测试样卷-----简易学籍管理系统
- 确认过眼神(*╹▽╹*)，这就是大家想要的BCH
- 452 Minimum Number of Arrows to Burst Balloons
- absolute 必须 relative_Workfine如何控制身份证号码必须为18位？
- 存储过程——介绍（一）
- MFC操作Excel2003的CRange类的Copy函数和Delete函数实现方法
- 力扣 数组中的最长山脉
- 第一次做web项目购物网站项目总结
- l360清零软件无响应_爱普生Epson L360 清零软件
- 深度学习模型---稀疏编码 Sparse Coding
- Axure统计图表设计（Excel设计统计图表、HighChart设计统计图表）
- 100层楼扔两个鸡蛋的问题
- alibaba的druid连接池的监控的两种方法
- 我的编程之路之初出茅庐（二）
- 题目1022：游船出租 2007年浙江大学计算机及软件工程研究生机试真题
- asp.net读取二代身份证
- html5 3d 签到墙,GO互动首创年会自定义动态主题背景签到墙，活动策划人必备！...
- 单片机控制继电器电路
- SiO2@Fe3O4-Carboxyl，羧基COOH化二氧化硅包裹超顺磁纳米粒
- Dolphin for Mac(Wii游戏模拟器) v5.0-13367中文免费版