Html2canvas uploads images to the server (java) and html2canvasjava

Html2canvas uploads images to the server (java) and html2canvasjava

Function: Send chat records to the server for some page chat classes.

Js framework used:

Imgareaselect

Http://odyniec.net/projects/imgareaselect/

Html2canvas

Http://html2canvas.hertzen.com/

Use the ImageAreaSelect plug-in and html2cancas to generate cancas and upload the content to the server.

Interface:

Front-end js script

$(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 Script

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,201 5 9:28:27 AM * @ version 1.0 */@ Controller @ RequestMapping ("/image ") public class ImageController {@ RequestMapping ("/upload") public void uplevels (HttpServletRequest request, HttpServletResponse response) {String data = request. getParameter ("data"); int result = 1; String msg = "uploaded successfully"; 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 = "Upload Failed"; 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 ();}}}

Reference: http://leobluewing.iteye.com/blog/2020145