html2canvas 上传图片至服务器（java）

功能：对于一些页面的聊天类，将聊天记录截图发送至服务器端。

用到的js框架：

imgareaselect
http://odyniec.net/projects/imgareaselect/
html2canvas
http://html2canvas.hertzen.com/
利用ImageAreaSelect插件截图，利用html2cancas将截图内容生成cancas并上传至服务器

界面截图：



前端js脚本

$(function(){
var _width = 0;
var _height = 0;
var _borderCss;

function imageCutCancel(){
alert(_borderCss)

}

$("#btnCut").on('click', function(){
_borderCss = $('#photo01').get(0).style.border;
$('#photo01').css('border', '1px solid #FF0000').imgAreaSelect({
handles: true,
onSelectEnd: function (img, selection) {
_width = selection.width;
_height = selection.height;
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="x2"]').val(selection.x2);
$('input[name="y2"]').val(selection.y2);
}
});

});

$("#btnCancel").on('click', function(){
_width = 0;
_height = 0;
$('#photo01').css('border', _borderCss).imgAreaSelect({remove: true});
});

$("#btnOk").on('click', function(){
if (_width<10 && _height<10) return false;

html2canvas($('div#photo01'), {
onrendered: function(canvas) {
var imgCxt = canvas.toDataURL();

$.post('${pageContext.request.contextPath}/image/upload.do', {"data":imgCxt}, function(json){
alert(json.msg);
}, 'json');

document.body.appendChild(canvas);
},
width: _width,
height: _height
});

$("#btnCancel").click();
});
});

java脚本

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.commons.codec.binary.Base64;
import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
* @author <a href="mailto:eko.z@outlook.com">eko.zhan</a>
* @date Mar 20, 2015 9:28:27 AM
* @version 1.0
*/
@Controller
@RequestMapping("/image")
public class ImageController{

@RequestMapping("/upload")
public void uplod(HttpServletRequest request, HttpServletResponse response){
String data = request.getParameter("data");

int result = 1;
String msg = "上传成功";

Base64 base64 = new Base64();
//base64 decode image
byte[] b = base64.decode(data.substring("data:image/png;base64,".length()).getBytes());
String fileName = String.valueOf(System.currentTimeMillis());
//image path
String filePath = System.getProperty("zokee.root") + File.separator + "DATAS" + File.separator + fileName + ".png";
//write image
File file = new File(filePath);
try {
FileUtils.writeByteArrayToFile(file, b);
} catch (IOException e) {
result = 0;
msg = "上传失败";
e.printStackTrace();
}

JSONObject json = new JSONObject();
json.accumulate("result", result);
json.accumulate("msg", msg);

response.setContentType("text/json");
response.setCharacterEncoding("utf-8");
try {
PrintWriter out = response.getWriter();
out.print(json.toString());
} catch (IOException e) {
e.printStackTrace();
}

}
}

参考文章：http://leobluewing.iteye.com/blog/2020145