base64+jfinal+canvas实现在线电子签名功能

最新推荐文章于 2023-09-06 17:09:41 发布
最新推荐文章于 2023-09-06 17:09:41 发布
阅读量315 收藏
点赞数


前端页面代码

[html] view plain copy print ?
  1. <!DOCTYPE html >    
  2. <html>    
  3. <head>    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  5. <title>电子签名测试</title>    
  6. <style type="text/css">    
  7. #canvas {    
  8.     border: 1px solid #ccc;    
  9. }    
  10. </style>    
  11. </head>    
  12.     
  13. <body>    
  14. <div id="canvasDiv"></div>    
  15. <button id="btn_clear">Clear</button>    
  16. <button id="btn_submit">Submit</button>    
  17. <form action="<span style="color: rgb(255, 0, 0);">${BASE_PATH}/web/regist/Base64ToImages</span>" method="post"><input    
  18.     type="hidden" name="imageData" id="imageData" /></form>    
  19.     
  20. <img id="tempImage" src="" style="display: none;" alt="签名" />    
  21.     
  22. <script language="javascript">    
  23.     var canvasDiv = document.getElementById('canvasDiv');    
  24.     var canvas = document.createElement('canvas');    
  25.     var canvasWidth = 600, canvasHeight = 400;    
  26.     var point = {};    
  27.     point.notFirst = false;    
  28.     
  29.     canvas.setAttribute('width', canvasWidth);    
  30.     canvas.setAttribute('height', canvasHeight);    
  31.     canvas.setAttribute('id', 'canvas');    
  32.     canvasDiv.appendChild(canvas);    
  33.     
  34.     if (typeof G_vmlCanvasManager != 'undefined') {    
  35.     
  36.         canvas = G_vmlCanvasManager.initElement(canvas);    
  37.     }    
  38.     var context = canvas.getContext("2d");    
  39.     
  40.     canvas.addEventListener("mousedown", function(e) {    
  41.         var mouseX = e.pageX - this.offsetLeft;    
  42.         var mouseY = e.pageY - this.offsetTop;    
  43.         paint = true;    
  44.         addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);    
  45.         redraw();    
  46.     });    
  47.     
  48.     canvas.addEventListener("mousemove",    
  49.             function(e) {    
  50.                 if (paint) {    
  51.                     addClick(e.pageX - this.offsetLeft, e.pageY    
  52.                             - this.offsetTop, true);    
  53.                     redraw();    
  54.                 }    
  55.             });    
  56.     
  57.     canvas.addEventListener("mouseup", function(e) {    
  58.         paint = false;    
  59.     });    
  60.     
  61.     canvas.addEventListener("mouseleave", function(e) {    
  62.         paint = false;    
  63.     });    
  64.     
  65.     var clickX = new Array();    
  66.     var clickY = new Array();    
  67.     var clickDrag = new Array();    
  68.     var paint;    
  69.     
  70.     function addClick(x, y, dragging) {    
  71.         clickX.push(x);    
  72.         clickY.push(y);    
  73.         clickDrag.push(dragging);    
  74.     }    
  75.     
  76.     function redraw() {    
  77.         //canvascanvas.width = canvas.width; // Clears the canvas    
  78.     
  79.         context.strokeStyle = "#df4b26";    
  80.         context.lineJoin = "round";    
  81.         context.lineWidth = 5;    
  82.     
  83.         while (clickX.length > 0) {    
  84.             point.bx = point.x;    
  85.             point.by = point.y;    
  86.             point.x = clickX.pop();    
  87.             point.y = clickY.pop();    
  88.             point.drag = clickDrag.pop();    
  89.             context.beginPath();    
  90.             if (point.drag && point.notFirst) {    
  91.                 context.moveTo(point.bx, point.by);    
  92.             } else {    
  93.                 point.notFirst = true;    
  94.                 context.moveTo(point.x - 1, point.y);    
  95.             }    
  96.             context.lineTo(point.x, point.y);    
  97.             context.closePath();    
  98.             context.stroke();    
  99.         }    
  100.         /*    
  101.          for(var i=0; i < clickX.length; i++)    
  102.          {          
  103.          context.beginPath();    
  104.          if(clickDrag[i] && i){    
  105.          context.moveTo(clickX[i-1], clickY[i-1]);    
  106.          }else{    
  107.          context.moveTo(clickX[i]-1, clickY[i]);    
  108.          }    
  109.          context.lineTo(clickX[i], clickY[i]);    
  110.          context.closePath();    
  111.          context.stroke();    
  112.          }    
  113.          */    
  114.     }    
  115.     var clear = document.getElementById("btn_clear");    
  116.     var submit = document.getElementById("btn_submit");    
  117.     clear.addEventListener("click", function() {    
  118.        canvas.width = canvas.width;    
  119.     });    
  120.     
  121.     submit.addEventListener("click", function() {    
  122.           
  123.         var image = document.getElementById("tempImage");    
  124.         image.src = canvas.toDataURL("image/png");    
  125.         document.getElementById("imageData").value = canvas    
  126.                 .toDataURL("image/png");    
  127.             
  128.         image.style = "display:block;";    
  129.         
  130.         alert(canvas.toDataURL("image/png"));    
  131.         
  132.         document.forms[0].submit();    
  133.     });    
  134. </script>    
  135.     
  136. </body>    
  137. </html>    
<!DOCTYPE html >  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>电子签名测试</title>  
<style type="text/css">  
#canvas {  
    border: 1px solid #ccc;  
}  
</style>  
</head>  
  
<body>  
<div id="canvasDiv"></div>  
<button id="btn_clear">Clear</button>  
<button id="btn_submit">Submit</button>  
<form action="${BASE_PATH}/web/regist/Base64ToImages" method="post"><input  
    type="hidden" name="imageData" id="imageData" /></form>  
  
<img id="tempImage" src="" style="display: none;" alt="签名" />  
  
<script language="javascript">  
    var canvasDiv = document.getElementById('canvasDiv');  
    var canvas = document.createElement('canvas');  
    var canvasWidth = 600, canvasHeight = 400;  
    var point = {};  
    point.notFirst = false;  
  
    canvas.setAttribute('width', canvasWidth);  
    canvas.setAttribute('height', canvasHeight);  
    canvas.setAttribute('id', 'canvas');  
    canvasDiv.appendChild(canvas);  
  
    if (typeof G_vmlCanvasManager != 'undefined') {  
  
        canvas = G_vmlCanvasManager.initElement(canvas);  
    }  
    var context = canvas.getContext("2d");  
  
    canvas.addEventListener("mousedown", function(e) {  
        var mouseX = e.pageX - this.offsetLeft;  
        var mouseY = e.pageY - this.offsetTop;  
        paint = true;  
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);  
        redraw();  
    });  
  
    canvas.addEventListener("mousemove",  
            function(e) {  
                if (paint) {  
                    addClick(e.pageX - this.offsetLeft, e.pageY  
                            - this.offsetTop, true);  
                    redraw();  
                }  
            });  
  
    canvas.addEventListener("mouseup", function(e) {  
        paint = false;  
    });  
  
    canvas.addEventListener("mouseleave", function(e) {  
        paint = false;  
    });  
  
    var clickX = new Array();  
    var clickY = new Array();  
    var clickDrag = new Array();  
    var paint;  
  
    function addClick(x, y, dragging) {  
        clickX.push(x);  
        clickY.push(y);  
        clickDrag.push(dragging);  
    }  
  
    function redraw() {  
        //canvascanvas.width = canvas.width; // Clears the canvas  
  
        context.strokeStyle = "#df4b26";  
        context.lineJoin = "round";  
        context.lineWidth = 5;  
  
        while (clickX.length > 0) {  
            point.bx = point.x;  
            point.by = point.y;  
            point.x = clickX.pop();  
            point.y = clickY.pop();  
            point.drag = clickDrag.pop();  
            context.beginPath();  
            if (point.drag && point.notFirst) {  
                context.moveTo(point.bx, point.by);  
            } else {  
                point.notFirst = true;  
                context.moveTo(point.x - 1, point.y);  
            }  
            context.lineTo(point.x, point.y);  
            context.closePath();  
            context.stroke();  
        }  
        /*  
         for(var i=0; i < clickX.length; i++)  
         {        
         context.beginPath();  
         if(clickDrag[i] && i){  
         context.moveTo(clickX[i-1], clickY[i-1]);  
         }else{  
         context.moveTo(clickX[i]-1, clickY[i]);  
         }  
         context.lineTo(clickX[i], clickY[i]);  
         context.closePath();  
         context.stroke();  
         }  
         */  
    }  
    var clear = document.getElementById("btn_clear");  
    var submit = document.getElementById("btn_submit");  
    clear.addEventListener("click", function() {  
       canvas.width = canvas.width;  
    });  
  
    submit.addEventListener("click", function() {  
        
        var image = document.getElementById("tempImage");  
        image.src = canvas.toDataURL("image/png");  
        document.getElementById("imageData").value = canvas  
                .toDataURL("image/png");  
          
        image.style = "display:block;";  
      
        alert(canvas.toDataURL("image/png"));  
      
        document.forms[0].submit();  
    });  
</script>  
  
</body>  
</html>

base64编码转化成图片代码

[java] view plain copy print ?
  1. /** 
  2.      *  
  3.      * @Description  
  4.      * @author GuoMing 
  5.      * @date 2016年7月14日 上午11:14:10  
  6.      * @param imgStr  base64字符串 
  7.      * @param imgFilePath  保存的图片路径+名称 
  8.      * @return 
  9.      */  
  10.     public static boolean GenerateImage(String imgStr, String imgFilePath) {                                   // 对字节数组字符串进行Base64解码并生成图片    
  11.         if (imgStr == null) // 图像数据为空    
  12.             return false;    
  13.         BASE64Decoder decoder = new BASE64Decoder();    
  14.         try {    
  15.              imgStr=imgStr.replace(" ", "+");  
  16.             // Base64解码    
  17.             byte[] bytes = decoder.decodeBuffer(imgStr);    
  18.             for (int i = 0; i < bytes.length; ++i) {    
  19.                 if (bytes[i] < 0) {// 调整异常数据    
  20.                     bytes[i] += 256;    
  21.                 }    
  22.             }    
  23.                                                                           
  24.             OutputStream out = new FileOutputStream(imgFilePath);                                              // 生成png图片    
  25.             out.write(bytes);    
  26.             out.flush();    
  27.             out.close();    
  28.             return true;    
  29.         } catch (Exception e) {    
  30.             return false;    
  31.         }    
  32.     }    
  33.       
/**
	 * 
	 * @Description 
	 * @author GuoMing
	 * @date 2016年7月14日 上午11:14:10 
	 * @param imgStr  base64字符串
	 * @param imgFilePath  保存的图片路径+名称
	 * @return
	 */
	public static boolean GenerateImage(String imgStr, String imgFilePath) {                                   // 对字节数组字符串进行Base64解码并生成图片  
		if (imgStr == null) // 图像数据为空  
			return false;  
		BASE64Decoder decoder = new BASE64Decoder();  
		try {  
			 imgStr=imgStr.replace(" ", "+");
			// Base64解码  
			byte[] bytes = decoder.decodeBuffer(imgStr);  
			for (int i = 0; i < bytes.length; ++i) {  
				if (bytes[i] < 0) {// 调整异常数据  
					bytes[i] += 256;  
				}  
			}  
																		
			OutputStream out = new FileOutputStream(imgFilePath);                                              // 生成png图片  
			out.write(bytes);  
			out.flush();  
			out.close();  
			return true;  
		} catch (Exception e) {  
			return false;  
		}  
	}

后台代码

[java] view plain copy print ?
  1. public void Base64ToImages(){  
  2.         String m=getPara("imageData", "null").substring(22);  
  3.         String path = getSession().getServletContext().getRealPath(Preference.DOWN_DIR); // 基础路径  
  4.         Base64ToImg.GenerateImage(m, path + "/test.png" );  
  5.           
  6.     }  
laiyuan999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现电子签名
sky_LQ的博客
03-13 6898
效果图 代码实现 &lt;template&gt; &lt;section class="signature"&gt; &lt;div class="signatureBox"&gt; &lt;div class="canvasBox" ref="canvasHW"&gt; &lt;canvas @touchs
前端实现电子签名（web、移动端）通用组件
weixin_46837985的博客
12-18 332
作者：桃小瑞https://juejin.cn/post/7174251833773752350前言在现在的时代发展中，从以前的手写签名，逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。举个常用的例子，大家都用过钉钉，钉钉上面就有电子签名，相信大家这肯定是知道的。那作为前端的我们如何实现电子签名呢？其实在html5...
服务端获取签名前端直传oss插件layui-aliossUploader-master.zip
08-27
服务端获取签名前端直传oss插件资源，这个插件是大佬上传到layui上了，资源里面有他的github地址，我写的博客记录一下如何是使用这个插件以及如何服务端获取签名前端直传oss
SSM+Maven+Jfinal+仓库管理系统
05-21
SSM+Maven+Jfinal+仓库管理系统SSM+Maven+Jfinal+仓库管理系统
web页面手写功能。
02-26
web页面手写功能、可在页面用鼠标写字。
HTML5 canvas实现电子签名
04-06
NULL 博文链接：https://topmanopensource.iteye.com/blog/1544126
PHP+JS+jSignature在线手写电子签名实例
07-02
PHP+JS+jSignature在网页上手写签名的插件实例，另外附加layer插件实现签名后显示签名图片确认及美化提示层，完全实现可在线签名后保存图片，下载即用！
电子签名，手写板签名(js+layui+jSignature)
masterphp的博客
10-01 946
电子签名，手写板签名(js+layui+jSignature)
JS的canvas简易功能:电子签名
qq_53593647的博客
01-10 222
分享canvas简易电子签名!刚学习到!
Bootstrap+jfinal实现省市级联下拉菜单
01-19
小小一个省市级关联菜单，却耗费了一个很多时间来摸索，原因在于对jquery不熟练，既然这么辛苦完成了一个组件，自然想要共享出来，让需要的人使用。 这只是一个基础版，后续还要再进行优化。 代码：省市级关联菜单下载地址 说明： sql语句就不再说了，里面有“city.sql”、“provincial.sql”两个文件。 1、先说说获取数据 public void initProcitys() { logger.info(获取所在地区); List<Provincials> provincials = Provincials.me.getProvincials(); for (Pro
H5电子签名--jSignature插件
12-02
H5前端的电子签名，简单明了，使用MUI框架和JQuery的jSignature插件
基于jq-signature的电子签名demo
09-07
基于jq-signature.js开发的电子签名插件，其中包含一个完整调用案例并附有简单注释，压缩包中包含了jq-signature开发版和压缩版的文件，可根据实际场景选择文件；使用前请阅读README文件，了解Demo的使用及特性。
jfinal+echarts实现饼图(数据库中读取数据)
05-30
简单的使用 jfinal + echarts 实现了从 Oracle 数据库中读取数据并显示成饼图。
Bootstrap+jfinal退出系统弹出确认框的实现方法
09-02
主要为大家详细介绍了Bootstrap+jfinal退出系统弹出框的实现方法，感兴趣的小伙伴们可以参考一下
HTML5电子签名在线生成代码.zip
05-23
HTML5电子签名在线生成代码基于jquery.1.10.2.min.js制作，鼠标手写电子签名代码。电子签名是指数据电文中以电子形式所含、所附用于识别签名人身份并表明签名人认可其中内容的数据。通俗点说，电子签名就是通过密码技术对电子文档的电子形式的签名，并非是书面签名的数字图像化，它类似于手写签名或印章，也可以说它就是电子印章。
LayUI项目之（查询&会议签字）
m0_68211831的博客
07-27 6361
2.将审批人的意见数据入库t_oa_meeting_audit。3.修改会议状态t_oa_meeting_info。1.将图片的字符串转成图片保存起来。
记录使用layui弹窗实现签名、签字
最新发布
LiuQjie的博客
09-06 1177
本来项目使用的是OCX方式做签字的，因为项目需要转到国产化，不在支持OCX方式，需要使用前端进行签字操作注：有啥问题看看文档，或者换着思路来，本文仅供参考！
基于android+jfinal的助学金管理系统
05-23
基于android+jfinal的助学金管理系统可以让管理员通过手机APP来进行管理，实现了更加便捷的管理方式。 具体实现步骤如下： 1. 确定系统需求 在开发前，需要明确系统所需功能和模块，例如：学生信息管理、助学金...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值