被 CORS 图像污染的画布

Posted

技术标签:

【中文标题】被 CORS 图像污染的画布【英文标题】:Canvas tainted with CORS images 【发布时间】:2013-02-07 02:07:21 【问题描述】:

我在使用支持 CORS 的图像和画布 (Pixastic) 时遇到问题。

在我的服务器上

Header set Access-Control-Allow-Origin "*"

在我的 htaccess 文件中。

在客户端,我尝试在 html 中设置 crossorigin 属性,如下所示:

<img src="http://myseconddomain/image.jpg" crossorigin="anonymous" />

没有成功。 之后我尝试了 Pixastic 的代码:

var el = elements[i];
el.crossOrigin = 'anonymous';

也不行。

我也禁用了 chrome 的缓存,但没有帮助。

Chrome 正在记录:

Uncaught Error: SECURITY_ERR: DOM Exception 18 
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

即使 HTML 看起来不错(crossorigin 属性已设置),图片标题看起来也不错(Access-Control-Allow-Origin)... 我不知道接下来要尝试什么,所以欢迎任何建议!

很遗憾,我无法提供任何链接,因为您可以猜到这个应用还远未生产。

【问题讨论】:

【参考方案1】:

我找到了一种方法,我会在这里发布,希望有一天它会对某人有所帮助。

碰巧我没有在 Pixastic 的代码中弄乱正确的函数,因为 init() 函数并不总是像我最初想象的那样被调用。

我在 Pixastic.process() 函数中添加了以下行:

dataImg.crossOrigin = "anonymous";

它成功了。

【讨论】:

以上是关于被 CORS 图像污染的画布的主要内容,如果未能解决你的问题,请参考以下文章

我应该在哪里设置 CORS 设置,这样我的画布才不会被污染?

受污染的画布无法导出

有没有办法确定跨域图像是不是会在不绘制画布的情况下污染画布?

Amazon S3 图像,无法使用 html5 画布保存,出现受污染的画布错误

Firefox 跨域图像被污染

[画布仅在预加载图像时出现CORS问题