思路就是 将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="<span style="color:#ff0000;">${BASE_PATH}/web/regist/Base64ToImages</span>" 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" );
- }