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");
}
});
总之就是这样子了，算是蛮简单的例子吧。
最后，附上我上传到scdn的例子
http://download.csdn.net/download/shuangwj/9561348