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...
  • yaosir1993
  • yaosir1993
  • 2017年07月31日 23:34
  • 2597

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

关于手机端开发中,使用html2canvas截图操作,想要截取不可见区域的解决办法,文章的方法可供参考。...
  • jackqth
  • jackqth
  • 2016年12月12日 21:36
  • 3854

JavaWeb跨域访问问题

在访问后台的时候,出现了跨域不能访问资源问题: 已拦截跨源请求:同源策略禁止读取位于 http://123.207.236.150/login 的远程资源。(原因:CORS 头缺少 ‘Access...
  • zjq_1314520
  • zjq_1314520
  • 2017年03月23日 21:12
  • 1182

Web开发之html2canvas 实现纯JS网页截图简单例子

代码库地址: https://github.com/niklasvh/html2canvas自己修改其中的 test.js (主要是其中的一些库的路径) 把test.js external文件夹 sr...
  • yxys01
  • yxys01
  • 2017年10月12日 17:22
  • 929

Web开发之用canvas2image.js将canvas保存为图片(实现页面截图下载功能)

关于实现页面截图常用的几个js插件库 canvas2image.jshtml2canvas.jsconvertImgToBase64.js废话不多说,直接上demo代码index.html: ...
  • yxys01
  • yxys01
  • 2017年10月12日 11:27
  • 706

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

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

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

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

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

Web开发中跨域的几种解决方案 设置 document.domain有src的标签JSONPnavigation 对象跨域资源共享(CORS)window.postMessage访问控制安全的...
  • nanjingshida
  • nanjingshida
  • 2017年05月07日 13:20
  • 365

[HTML5-SVG,VML,CANVAS]Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上...
  • luqin1988
  • luqin1988
  • 2013年04月17日 16:02
  • 4582

移动端H5页面截图【含 domtoimage、html2canvas 】

移动端H5页面截图【含 domtoimage、html2canvas 】 起因: 由于云栖大会项目需要支持 名片保存到本地功能【如下图红框】,所以,需要单独截取页面中的名片信息,并且保存到本地。 推...
  • Candy_home
  • Candy_home
  • 2017年11月02日 16:35
  • 1799
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web开发之html2canvas截图如何解决跨域的问题?
举报原因:
原因补充:

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