html2canvas截图如何解决跨域的问题?

问题描述

html2canvas截图如何解决跨域的问题?

1、问题描述
如果不跨域的话,截图正常。

如果有跨域的图片,那么js报错,报错信息如下:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

2、代码

 /**
 * 截图
 */
function doScreenShot(){
    html2canvas(document.body, {
        onrendered: function(canvas) {
            canvas.id = "mycanvas";
            var image =canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
            window.location.href=image; // it will save locally
        }
    });
}

3、补充
看到官方(https://github.com/niklasvh/html2canvas)上面有介绍代理啥的,也没看明白怎么使用,好像还没有java方面的代理。有人能补充一下这方面的使用介绍么?

或者有其他的web页面截图方面的方法也可以介绍下,谢谢~


附:
html2canvas
1、官网
https://github.com/niklasvh/html2canvas
2、这个是别人发的提问帖子,问的同样的问题,提问的人说他问题已经解决了,我他妈楞是没看懂啊http://stackoverflow.com/questions/9825962/how-to-use-html2canvas-proxy

解决方案

我做的也是地图项目,实现不了。
在网上看了好多示例,有说用代理的,还有的说的是:在跨域的服务器上设置header设置为允许跨域请求。结果也没反应。
楼主解决问题了吧。请教一哈

解决方案二:

内容有外域的图片

 <img src="http://avatar.csdn.net/7/B/2/3_showbo.jpg"/>

需要修改img地址为你网站的代理页面,如xxx.jsp,然后发送跨域页面url地址到xxx.jsp,xxx.jsp复制将远程图片下载,这样就同源了才能绘制出图片内容

  <img src="xxx.jsp?imgurl=http://avatar.csdn.net/7/B/2/3_showbo.jpg"/>

参考
java 下载网络上的图片并保存到本地目录:http://takeme.iteye.com/blog/1683380

解决方案三:

在 java程序里面的http请求代理是这样的 HttpClient httpClient=new HttpClient();
httpClient.getHostConfiguration().setProxy("ip地址", 端口)

解决方案四:

HTML5解决跨域问题
html2canvas网页截图

时间: 2024-12-03 10:57:33

html2canvas截图如何解决跨域的问题?的相关文章

window.name解决跨域数据传输问题

原文:http://research.microsoft.com/~helenw/papers/subspace.pdf window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等)而发明的(详细见原文:<Session variables without cookies>),后来 Kris Zyp 在此方法的基础上强化了 window.name 传输

在liferay中用serveResource解决跨域访问问题

简介: 众所周知,跨域问题是十分常见的需求,比如让客户端的ext-js控件可以渲染来自服务器端的json对象.我们可以用很多很多方法来解决,比如jsonP.但是,在liferay中,我们可以用serveResource方法来优雅的解决跨域访问问题. 白板分析: 以下是摘自我在技术讨论会上的白板: 解决方法: 首先编写一段serveResource方法,让其和远端的json对象打交道,它作为中间层可以封装来在远程的json资源,然后提供给本域内的ext-js代码来渲染. 当然了,这里我们的资源必须

node js-php应用80端口,使用node.js通过8888端口实现即时推送,怎么解决跨域问题?

问题描述 php应用80端口,使用node.js通过8888端口实现即时推送,怎么解决跨域问题? 项目背景是一个php应用.为了加入即时推送功能,使用node.js写了8888端口用于推送即时消息,并使用socket.io进行数据传输. 如何解决80端口应用页面跨域与8888端口建立socket连接问题?

js前端解决跨域问题的8种方案(最新最全)_javascript技巧

1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.jshttp://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口 不允许 http://www.a.com/a.js https://www.a.com/b.j

AngularJs解决跨域问题案例详解(简单方法)_AngularJS

首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要说了,我的意思是这个说明必须要做了,答案是必须的,为了更好的方便大家理解嘛. 我们以两个主域名或者一个主域名+一个二级域名为例,均可演示跨域问题. 客户端 a.com 服务端 b.com或者s.a.com angularJs版本 V1.2.25 准备工作做得很充分嘛,就差把我们的编辑器是subline暴露出来了,这个一般人我是不告诉他滴. 有人嚷嚷了,这问题老早就有了,你现在提出来有啥意义呢?难不成你还

ASP.NET配合jQuery解决跨域调用的问题_实用技巧

一. 使用JSONp方式调用 不做详细讲解,可以参考jq文档<jQuery 1.10.3 在线手册> 二. 服务端配置 修改Web.config 文件 <system.webServer> <modules runAllManagedModulesForAllRequests="true"></modules> <httpProtocol> <customHeaders> <add name="Ac

纯前端解决跨域问题

背景 跨域是由浏览器的同源策略引起的,是指页面请求的url地址,必须与浏览器上的url地址处于同域上(即域名,端口,协议相同). 这是为了防止某域名下的接口被其他域名下的网页非法调用,是浏览器对JavaScript施加的安全限制. 这个措施的出发点是好的,但是程序页面开发的过程中,却常常给前端开发者带来麻烦. 由于前端开发过程中,静态资源是放在本地电脑上的,访问这些资源通常通过IP方式(127.0.0.1)或者localhosts来访问,与线上服务器所在域名不符,不能顺利调用服务的端口. 解决跨

一步一步学习SignalR进行实时通信_3_通过CORS解决跨域

原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 前言 关于start()的补充 跨域解决方案 JSONP CORS CORS跨域演示 结束语 参考文献 前言 这周工作比较忙,一直没有时间学习SignalR,大致希望一周能写一篇关于SignalR的文章.上一篇用Persistent Connections方式实现了个简单的在线

javascript使用window.name解决跨域问题第1/2页_javascript技巧

window.name 传输技术,原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制.数据只能是字符串.设置和获取 cookie 语法的复杂等等)而发明的(详细见原文:<Session variables without cookies>),后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ,并引入到了 Dojo (dojox.io.windowName),用来解决跨域数据传输问题.window.name 传输