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

来源：互联网发布：知恩感恩手抄报编辑：程序博客网时间：2024/04/26 14:16

思路就是将canvas 转化为base64编码传给后台，然后后台将编码还原为图片，下面是完整代码

前端页面代码

<!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编码转化成图片代码

/** *  * @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;  }  }

后台代码

public void Base64ToImages(){String m=getPara("imageData", "null").substring(22);String path = getSession().getServletContext().getRealPath(Preference.DOWN_DIR); // 基础路径Base64ToImg.GenerateImage(m, path + "/test.png" );}

666导航网——方便管理个人常用网址

阅读全文

1 0