您的位置：首页 > 其它

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

2017-05-25 14:31 441 查看

思路就是将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导航网——方便管理个人常用网址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： base64 电子签名

相关文章推荐

新的分享

章节导航