功能：对于一些页面的聊天类，，将聊天记录截图发送至服务器端。
用到的js框架：
imgareaselect
html2canvas
利用ImageAreaSelect插件截图，利用html2cancas将截图内容生成cancas并上传至服务器
界面截图：
前端js脚本
<span style="white-space:pre"></span>$(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脚本
@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 imagebyte[] b = base64.decode(data.substring("data:image/png;base64,".length()).getBytes());String fileName = String.valueOf(System.currentTimeMillis());//image pathString filePath = System.getProperty("zokee.root") + File.separator + "DATAS" + File.separator + fileName + ".png";//write imageFile 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();}}}参考文章：
不然你大概会一直好奇和不甘吧——
