标签:
1、html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理。基本原理就是在后端将图片的数据生成base64再返回给前端使用。使canvas画布分析元素的时候像分析本地的一样简单。这就是我的理解。官网给出的只有php的方法,我是照扒了一般java的出来。有写的不好的地方,欢迎大家指正。废话不多说了,先上代码。
@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); DataInputStream 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{ // 获取数据流生成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(); // 将byte转成base64 BASE64Encoder 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(); } }
2、前端调用的代码如下:
html2canvas(document.getElementById("aaaaaaa"), { "logging": true, //Enable log (use Web Console for get 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"); } });
总之就是这样子了,算是蛮简单的例子吧。
java使用代理 html2canvas 截屏 将页面内容生成图片
标签:
原文地址:http://www.cnblogs.com/zsslll/p/5620696.html