Java uses the proxy Html2canvas screenshot to generate a picture of the page content

1, Html2canvas generated pictures simple and easy to use, but involves cross-domain will appear problems, the official solution is to set up agents. The rationale is to generate base64 data from the back end and return it to the front end. Making the canvas canvas parse elements is as simple as analyzing the local. That's what I understand. The official website gives only PHP method, I was stripped of the general Java out. There are bad places to write, please correct me. Don't say much nonsense, first on the code.

@RequestMapping (value= "/proxy", method = requestmethod.get) public void Getjwd (HttpServletRequest request, HttpServletResponse response) {String URL = request.getparameter ("url"); String callback = Request.getparameter ("callback"), if (url! = "" && Callback! = "") {try {URL urlinfo = new URL (URL) ; if (Urlinfo.getprotocol (). Equals ("http") | | urlinfo.getprotocol (). Equals ("https")) {HttpURLConnection conn = ( httpurlconnection) urlinfo.openconnection (); String ContentType = Conn.getcontenttype (); if (Contenttype.equals ("Image/png") | | contenttype.equals ("image/jpg") | | Contenttype.equals ("Image/jpeg") | | Contenttype.equals ("Image/gif") | | Contenttype.equals ("text/html") | | Contenttype.equals ("application/xhtml")) {if (Request.getparameter ("xhr2") = null) {Response.setheader (" Access-control-allow-origin "," * "); Response.setcontenttype (contentType);D atainputstream input = new DataInputStream (Conn.getinputstream ()); Bufferedoutputstream bout = new Bufferedoutputstream (Response.getoutputstream ()); try {byte b[] = new byte[1024];      int len = Input.read (b);        while (Len > 0) {bout.write (b, 0, Len);      Len = Input.read (b);    }} catch (Exception e) {e.printstacktrace ();      } finally {bout.close ();    Input.close (); }}else{response.setcontenttype ("Application/javascript"); if (Contenttype.equals ("text/html") | | Contenttype.equals ("application/xhtml")) {}else{//Gets the data stream generated by the byte byte datainputstream input = new DataInputStream ( Conn.getinputstream ()); input.tostring (); byte[] buffer = new byte[1024 * 8]; Bytearrayoutputstream BOS = new Bytearrayoutputstream (1000); Byte[] B = new byte[1024 * 8];              int n;              while ((n = input.read (b))! =-1) {bos.write (b, 0, N);              } input.close ();             Bos.close ();              Buffer = Bos.tobytearray (); Turn byte into base64base64encoder encode = new Base64encoder (); String base64data = encode.encode (buffer); base64data = Base64data.replaceall ("\ r \ n", ""); Response.getwriter (). Write (callback+ "('" + "data:" + ContentType + "; base64," + Base64data + "')");}}}} catch (Malformedurlexception e) {e.printstacktrace ();} catch (IOException e) {e.printstacktrace ()}}

The code for

2, front-end calls is as follows:

Html2canvas (document.getElementById ("Aaaaaaa"), {"Logging": True,//enable log (use Web Console for GE T Errors and Warnings) "proxy": BasePath + "canvas/proxy.do", "onrendered": function (canvas)                        {var img = new Image ();                        Img.crossorigin = "*";                            Img.onload = function () {img.onload = null;                            Document.body.appendChild (IMG);                        $ ("#Screenshot_show"). Append (IMG);                        };                            Img.onerror = function () {img.onerror = null;                            if (window.console.log) {Window.console.log ("not loaded image from Canvas.todataurl");                            } else {alert ("not loaded image from Canvas.todataurl");                       } };                    IMG.SRC = Canvas.todataurl ("Image/png"); }                });

In a word, it is quite a simple example.

Java uses the proxy Html2canvas screenshot to generate a picture of the page content