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指令碼

@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();}}}

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

html2canvas 上傳圖片至伺服器（java）