我在使用 canvas (Pixastic) 支持 CORS 的图像时遇到问题。
在我的服务器上
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
)...
我不知道接下来要尝试什么,所以欢迎任何建议!
很遗憾,我无法提供任何链接,因为正如您所猜测的那样,该应用还远未投入生产。
最佳答案
我找到了一种方法,我会把它贴在这里,希望有一天它能对某人有所帮助。
碰巧我没有弄乱 Pixastic 代码中的正确函数,因为 init() 函数并不总是像我最初想的那样被调用。
我在 Pixastic.process() 函数中添加了以下行:
dataImg.crossOrigin = "anonymous";
它成功了。
关于javascript - Canvas 被 CORS 图像污染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15007536/