createElement('canvas') 代码适用于 Safari，但不适用于 Firefox、Chrome答案

【问题标题】：createElement('canvas') code works on Safari but not on Firefox, ChromecreateElement('canvas') 代码适用于 Safari，但不适用于 Firefox、Chrome
【发布时间】：2011-04-18 04:32:10
【问题描述】：

我正在尝试获取图像并将其数据加载到变量中的简单查询。此代码适用于 Safari(5)，但不适用于 Firefox（3.6.3 for Mac）或 Chrome（10 for Mac）。

这是代码：http://jsfiddle.net/saTzx/

知道可能出了什么问题吗？

与此代码相关的另一个问题是，drawImage() 不应该实际绘制图像吗？这在任何浏览器中都不会发生。

【问题讨论】：

当你说“不应该 drawImage() 实际绘制图像？”你的意思是在屏幕上？好吧，您还没有将<canvas> 元素添加到文档的任何位置，因此绘制的图像将不可见...
顺便说一句。当您实际打印出抛出的异常时，它会很有帮助。

标签： javascript html canvas cross-browser drawimage

【解决方案1】：

图像被绘制，你只是从未将画布附加到任何父元素（例如document.body.appendChild(canvas)）。

我在 Safari 中也收到“无法加载图像”（另外，这不是真正的错误，图像已加载），这是正确的。您正在尝试读取被图像污染的图像数据，而没有任何适当的 CORS 标头，这是您的错误的根源。修正你的标题。

【讨论】：

非常感谢伊莱。我还阅读了您关于“未捕获的错误：SECURITY_ERR：DOM Exception 18”的另一篇文章，它非常有帮助。
因此，如果我理解正确，则必须在服务器端 HTTP 标头上添加标头。或者将文件的副本复制到本地文件夹。 JS本身没有什么可以做的吗？（我在developer.mozilla.org/en/http_access_control 的行中尝试了一些东西，但它们似乎没有帮助。
如果您只请求位于同一域中的图像，则不必使用 CORS，但如果您请求其他域中的图像，则需要使用 CORS。一种解决方法是在同一域上使用代理。