前台利用html2canvas.js渲染画布实现截取屏幕传送后台存储成图片文件

前台引用html2canvas.js插件

js方法

function cutImg(){
html2canvas(document.body, {
onrendered: function(canvas) {
//document.getElementById("img").appendChild(canvas);//生成画布后如何处理，当然可以在新标签打开，在浮层展示等等
console.info(encodeURI(canvas.toDataURL()).length);
$.post("${ctx}/coreBusinessPoint/saveImg.do",{image:encodeURI(canvas.toDataURL()),temp1:encodeURI("中国")},function(data){
var img = document.createElement("img");
img.src = data.dataUrl;
document.getElementById("img").appendChild(img);
alert("保存成功！");
});
},
canvas_id: 'canvas'//通过修改html2canvas源码添加canvas的id
});
}

html代码

 

后台代码

public String saveImg(){
try {
BASE64Decoder decoder=new BASE64Decoder();
byte[] bytes = decoder.decodeBuffer(image.split(",")[1]);
StringBuffer sb = new StringBuffer();
sb.append(getServletContext().getRealPath("/"));
sb.append(System.currentTimeMillis()).append(".png");
File file = new File(sb.toString());
FileOutputStream out = new FileOutputStream(file);
out.write(bytes);
out.flush();
out.close();
bytes = null;
json.put("dataUrl", image);
Struts2Utils.renderJson(json);
//返回请求
return null;
} catch (FileNotFoundException e) {
return ERROR;
} catch (IOException e) {
return ERROR;
}
}