当前位置：首页 > 前端 > 正文内容

图片下载跨域问题

淙嶙7年前 (2018-07-18)前端1232

开发的二维码图片下载功能，报了如下的错误,Tainted canvases may not be exported。

“受污染的画布可能会不能输出“

下面是来着stack overflow的解决方案：

For security reasons, your local drive is declared to be “other-domain” and will taint the canvas.

(That’s because your most sensitive info is likely on your local drive!).

While testing try these workarounds:

Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders).
Post your images to a site that supports cross-domain sharing (like dropbox.com). Be sure you put your images in dropbox’s public folder and also set the cross origin flag when downloading the image (var img=new Image(); img.crossOrigin=”anonymous” …)
Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).

上面的话的意思就是说，出于安全的原因，您的本地驱动器被声明为“其他域”，这将会污染到画布(canvas)。

（这可能是因为你本地的驱动器上有最敏感的信息）

你可以试下这些解决方案：

把所有的页面关联的文件（.html,.jpg,.js,.css 等等）放在桌面上（不放在子文件夹中）。
将您的图像发布到支持跨域共享的网站（如dropbox.com）。确保将图像放在dropbox的公共文件夹中，并对要下载图像设置cross origin标记（var img = new Image（）; img.crossOrigin =“anonymous”…）
在开发计算机上安装Web服务器（IIS和PHP Web服务器都具有可在本地计算机上正常运行的免费版本）。

其实第二解决方案，很符合我的情景，其他的很鸡肋。

方案来源地址：https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported

//使用标签加入crossOrigin属性

//初始化一个Image,加入crossOrigin属性

function loadImage(src, callback) {
    var img = new Image();
    img.onload = callback;
    img.setAttribute('crossOrigin', 'anonymous'); // works for me
    img.src = src;
    return img;
}