程序博客网 > 最好的炒股软件排行

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

来源：互联网 发布：最好的炒股软件排行 编辑：程序博客网 时间：2024/04/29 11:03


前端页面代码

[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>    

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.       

后台代码

[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.     }  
阅读全文
0 0
最好的炒股软件排行 最好的炒股软件排行
原创粉丝点击
热门IT博客
淘宝北极熊单人电热毯淘宝北极熊单人电热毯
知合控股 封锐知合控股 封锐
公需课挂机软件
淘宝无线详情页加链接
北京有哪些php外包公司
沪港通买入数据
一键上传淘宝的危害
javascript脚本语言
复旦博士后待遇 知乎
黑页源码
环境监测数据弄虚作假
朝鲜 知乎
益盟主力控盘指标源码
mac photoshop cc 2016
windows远程桌面工具
台湾人眼中的大陆知乎
jquery 对象数组
软件著作权侵权案例
淘宝喵喵通信
exp数据库表结构导出
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 去除腋下异味小妙招 怎么判断有没有狐臭 怎么预防狐臭 怎么去掉狐臭 突然有狐臭什么原因 祛腋臭 如何消除狐臭 狐臭的原因 腋臭狐臭 如何除去狐臭 狐臭香体露 去除狐臭的简单方法 怎样去除腋下异味 狐臭什么味道 狐臭自己能闻见吗 怎样除去狐臭 夏天有狐臭怎么办 狐臭会自己消失吗 狐臭会不会遗传 狐臭怎么解决 狐臭遗传么 去狐臭的办法 祛除狐臭小妙招 如何不让孩子得狐臭 怎样减轻狐臭 出汗有腋臭 狐臭喷雾 狐臭会不会自己消失 吃什么可以减轻狐臭 如何解决狐臭 祛狐臭 女生有狐臭咋办 怎么除腋臭 有腋臭 除狐臭小妙招 稀耳屎都有狐臭吗 去狐臭的产品 怎样能去除狐臭 生姜去狐臭 狐臭遗传规律 狐臭遗传

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里