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