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

对岸 发布于 2015/11/17 15:49
阅读 20K+
收藏 3

华为云11月刊推送:DIY微信问答机器人,高性能计算代码的20个技巧!>>>

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页面截图方面的方法也可以介绍下,谢谢~

加载中
2
AK_诚
AK_诚

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

后来偶尔中,在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这两个不要同时加,我当时在看官网文档的时候,看到这两个参数都是解决跨域的,后来就两个都加上去了,发现两个加上去就会有问题,具体你可以查看源码,这里我就不做过多解释了

 

AK_诚
AK_诚
回复 @ledcf : https://share.weiyun.com/0d5c9cc7ac20076c1c389e2533b8f618 主要就改了上面截图的那几个地方
ledcf
ledcf
回复@AK_诚 : 大神可以把修改的js发下吗?我的qq1609479901,拜托大神!
j
jiangjiang
谢谢帮大忙了,终于解决了
m
maizi_
html2canvas出来的canvas空白就是添加了useCORS参数解决的,谢谢
0
李温凉
李温凉

目前也遇到同样的问题。

canvas调用toDataURL()时跨域的问题无法解决。

请问题主有没找到解决方法?

对岸
对岸
没有。
返回顶部
顶部