javascript - 被 CORS 图像污染的画布

Question

我在使用支持 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）...我不知道接下来要尝试什么，所以欢迎任何建议！

不幸的是，我无法提供任何链接，因为您可以猜到这个应用程序离生产还很远。

Answer 1

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

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

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

dataImg.crossOrigin = "anonymous";

它成功了。