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

java使用代理 html2canvas 截屏 将页面内容生成图片的更多相关文章

  1. html2canvas将页面内容生成图片

    html2canvas官网链接地址:https://html2canvas.hertzen.com/ <!doctype html> <html lang="en" ...

  2. html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示

    1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...

  3. vue中使用html2canvas及解决html2canvas截屏图片模糊问题

    最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这 ...

  4. html2canvas截屏用法

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  5. html2canvas 截屏 兼容手机端

    <template> <div> <!--<input type="button" id="btnsavaImg" valu ...

  6. Java实现网页截屏功能(基于phantomJs)

    公司最近有个需求:把用户第一次的测量身体信息和最近一次测量信息进行对比,并且需要把对比的数据截成图片可以发给用户(需要在不打开网页的情况下实时对网页进行截图然后保存到服务器上,返回图片地址),通过网上 ...

  7. Javascript网页截屏的方法

    最近我在研究开发一个火狐插件,具体的功能是将网页内容截屏并分享到微博上.目前基本功能已经实现,大家可以在 @程序师视野 里看到用这个截图插件分享的微博的效果. 之前我曾写过如何将canvas图形转换成 ...

  8. iOS应用截屏

    iPhone自从推出后就自带了截屏功能,简单而易用,所以应用就没什么截屏的需求了,不过有些时候我们还是会遇到这个需求.比如,我们开发了一个播放器,用openGL进行video render,此时直接截 ...

  9. Android 获取浏览器当前分享页面的截屏

    Android 获取浏览器当前分享页面的截屏 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/BrowserScreenShotActivity 文中 ...

随机推荐

  1. 关于UIView的显示问题

    今天在倒腾PP助手SDK的接入,游戏框架使用的是cocos2d-x,因为不熟悉iOS的UIKit,所以费了点功夫终于让SDK的登录页面显示出来了,问题来了,在iOS设备landscape显示模式UI显 ...

  2. zookeeper,dubbo,dubbo admin

    zookeeper 1. 分布式协调服务:我们的程序运行在不同的机器上,这些机器可能位于同一个机架,同一个机房又或不同的数据中心.在这样的环境中,我们要实现协调该怎么办?那么这就是分布式协调服务要干的 ...

  3. Mybatis select返回值为map时,选取表字段的两列作为key,value

    项目需要从ibatis升级到MyBatis,dao中有一个方法返回Map类型,具体是查询语句查询两个字段,将结果列表字段A的值作为key字段B的值作为value存入Map中作为结果返回: ibatis ...

  4. [OSG]OSG例子程序简介

    1.example_osganimate一)演示了路径动画的使用(AnimationPath.AnimationPathCallback),路径动画回调可以作用在Camera.CameraView.M ...

  5. asp.net-枚举绑定控件

    1.DropDownList asp.net页面: <asp:DropDownList ID="drpTemplateType" runat="server&quo ...

  6. jQuery概述

    JQUERY   JS语法字典---网友总结 1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->ht ...

  7. Network Wars-ZOJ2676最小割+01规划

    Time Limit: 5 Seconds Memory Limit: 32768 KB Special Judge Network of Byteland consists of n servers ...

  8. Mysql空用户导致数据库登陆故障处理 (原创帖,转载请注明出处)

    首先感谢在本次故障中阿铭对我的无私帮助,万分感谢!阿铭linux论坛:http://www.apelearn.com/study_v2/   问题描述: 公司安全部门扫描到数据库空密码漏洞,用户名密码 ...

  9. OOP过度抽象

    OI的时候,解决问题是第一位的,别老想着可维护性.能过就行啦,又不是工程. 下面是两篇相关的文章 来自酷壳 编程真难啊 2009年9月3日 陈皓 上周,在Sun的Java论坛上出现了一个这样的帖子,L ...

  10. 2017年1月4日 16:16:24开始学习Linux——好像回到上次发随笔的时间。

    auto为C语言局部变量的默认属性 static指明变量的静态属性,也具有作用域限定符的意义 static修饰的全局变量作用域只是生命的文件中,修饰的函数作用域只是声明的文件中 register指明将 ...