Web开发之html2canvas截图如何解决跨域的问题?

转载 2017年10月12日 16:59:22

       关于图片跨域的问题本人在使用过程中也遇到了,开始使用代理服务器解决了,但是感觉不太好,

       后来偶尔中,在html2canvas源码中改了几段小代码终于把问题给解决了。

function ImageContainer(src, cors) {
    this.src = src;
    this.image = new Image();
    var self = this;
    this.tainted = null;
    this.promise = new Promise(function(resolve, reject) {
        self.image.onload = resolve;
        self.image.onerror = reject;
        if (cors) {
            //self.image.crossOrigin = "anonymous";//1.去掉此处的anonymous代码改为空
            self.image.crossOrigin = "";
        }
        //self.image.src = src;//2.在源src后面添加一个随机数如时间戳+"?"+new Date().getTime();
        self.image.src = src+"?"+new Date().getTime();
        if (self.image.complete === true) {
            resolve(self.image);
        }
    });
}

       通过以上改造尼玛居然把问题给解决了,很奇怪,上面的代码改造过程缺一不可,不过我的问题是跨子域,还有个关键设置,就是在调用时

html2canvas($("body"),{onrendered:function(canvas){
        //
},useCORS:true});
//这个地方只需要将useCORS设置成true,千万不要加allowTaint:true这两个不要同时加,我当时在看官网文档的时候,看到这两个参数都是解决跨域的,后来就两个都加上去了,发现两个加上去就会有问题,具体你可以查看源码,这里我就不做过多解释了

转自:http://www.oschina.net/question/1027544_2141798

相关文章推荐

html2canvas跨域问题的简单解决方法

html2canvas跨域问题的简单解决方法本文所阐述的部分重要前提如下: 项目域名:www.xyz.com(80端口) 图片资源采用了nginx静态资源映射 页面访问地址:www.xyz.com/i...

html2canvas.js网页截图功能(解决截图不全问题)

今天来了一个新需求,需要在用户查询过后提供结果集截图功能,百度发现html2canvas.js+jQuery可以解决网页截图的问题。  话不多说上代码,以下为主要功能方法  html2canvas...

web开发跨域问题个人总结(PHP与js交互)

之所以想总结一下,这个我最近接手的一个新项目有关:我们公司中的另一个站点需要跨站点请求我这边一个‘评论’组件的功能。本来如果走的是接口调用也没这么多问题,可是公司考虑到评论组件公司里的其他五个站点都要...

Web开发中跨域的几种解决方案

Web开发中跨域的几种解决方案 设置 document.domain有src的标签JSONPnavigation 对象跨域资源共享(CORS)window.postMessage访问控制安全的...

html2canvas网页截图处理不可见区域

关于手机端开发中,使用html2canvas截图操作,想要截取不可见区域的解决办法,文章的方法可供参考。

html2canvas 网页截图

场景:  项目中需要提供多某些图表的截图功能,查找资料发现 html2canvas 是一个很好用的前端截图方法,利用jquery和html5的结合,便可以在前端直接生成图片保存,不需要后台交互用图片流...

html2canvas网页截图

html2canvas工具请自行搜索:

java 使用html2canvas实现屏幕截图

知识点参考: http://www.cnblogs.com/dreammyle/p/4872574.html案列:前段使用jsp页面,处理代码为Controller层代码。 js插件: 1、jq...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)