画布已被跨域数据本地图像污染答案

【问题标题】：The canvas has been tainted by cross-origin data local image画布已被跨域数据本地图像污染
【发布时间】：2017-12-16 01:40:18
【问题描述】：

这个问题被问了很多，但我就是不明白为什么会发生在我身上。

基本上，我有一个画布和一个图像，当我尝试这样做时：

var canvas = document.getElementById('somecanvas');
var ctx = canvas.getContext('2d');
var someimage = document.createElement('img');
someimage.setAttribute('src', 'img/someimage.png');
someimage.onload = function(){
    ctx.drawImage(someimage, 0, 0, canvas.width, canvas.height);
    data = ctx.getImageData(0,0,canvas.width,canvas.height);
}

我觉得难看：

"未捕获的 DOMException：无法在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨域数据污染。在 HTMLImageElement.someimage.onload"

我应该提一下，我对编程还很陌生，对 javascript 更是如此。当我从 file:\\ 运行它时应该发生这种情况吗？

我没有发现任何人遇到与我完全相同的问题，人们对其他问题的解释与托管图像的服务器有关。但在这种情况下，它不是托管在服务器上的，所以我对它是如何工作的感到困惑。或者更确切地说，不起作用。

【问题讨论】：

您好 Andrew - 说谢谢很棒，但请在答案上评论您的thanks，而不是编辑您的问题。一般来说，您的声誉太低，无法发表评论，但您可以在自己的问题线程中评论答案。 :)
你好，弗里茨。感谢您的提醒。我想通过评论表示感谢，但是当我将鼠标悬停在评论链接上时，我注意到它说“避免像“谢谢”这样的 cmets”，所以我感到困惑并改为编辑。
完全没有问题，老实说，感谢某人的最佳方式是支持他们的答案（如果您是问题作者，则接受），如果您不是，这可能看起来微不足道习惯了，但相信我，我们为那个投票而活；）（检查this link并查看第三个要点）我绝对不会抱怨友善，所以谢谢你的尝试!

标签： javascript html canvas cors getimagedata

【解决方案1】：

出于安全原因，如果您尝试执行某些操作（其中包括画布图像），如果您使用file:// URL，许多浏览器会抱怨。

您确实应该从本地 HTTP 服务器同时提供页面和图像，以避免这些限制。

【讨论】：

【解决方案2】：

啊，你已经达到了 CORS 限制，我猜你在 Google Chrome 中遇到了这个问题，因为它是最激进的实现者而臭名昭著。这个我见过很多次了。

CORS 是一种协议，用于防止将跨域内容插入网页。它不仅会影响脚本文件（正如您所料，因为您不希望任何人能够将恶意脚本注入您的网页），而且还会影响图像和字体等资源。

它影响图像的原因是因为恶意人员发现他们可以使用 HTML5 画布对象将您的网页内容复制到 PNG 文件中，并随意从该文件中提取个人数据。您可以想象会发生什么如果您在发生这种情况时正在从事网上银行交易！

但是，这是您遇到的烦人部分，阻止此类恶意活动也会影响跨域资源的合法使用（例如，将所有图像保存在单独的存储库中）。

那么你如何解决这个问题？

在 Firefox 上，您应该没有问题。 Firefox 对这个问题应用了一些智能，并识别出来自与您的网页相同的 file:// 规范的图像实际上不是跨域的。只要它们与您的网页位于硬盘驱动器上的同一目录中，它就会允许它们通过。

另一方面，Chrome 的宽松程度要少得多。它将所有此类访问视为跨域访问，并在您尝试在画布上使用 getImageData() 和 putImageData() 时实现安全关闭。

如果您不想麻烦地安装和配置自己的本地 Web 服务器，但仍想使用 Chrome 及其漂亮、友好的调试器，则有一种解决方法。您必须创建一个快捷方式，指向您的 Chrome 可执行文件并在您双击它时运行它，但它会使用特殊的命令行标志启动 Chrome：

--allow-file-access-from-files

保存此快捷方式，将其标记为“Chrome 调试版本”，以提醒您仅将其用于调试自己的代码（您应该切勿在安全性较低的情况下正确访问 Internet！），以及从此时起，您应该能够毫无问题地调试您的代码。

但是，如果您要进行大量此类调试，则更好的长期解决方案是安装 Web 服务器，并将其配置为从每次使用“localhost”URL 时所需的目录。我知道，这既乏味又耗时，并且会分散你对编码的渴望，但一旦完成，它就完成了，尘埃落定，永久解决你的问题。

如果你真的想测试你的编程技能，你甚至可以编写自己的网络服务器来完成这项工作，使用类似 node.js 服务器端框架的东西，但如果你' 是 JavaScript 的新手，在您获得更多很多经验之前，您最好放弃这项任务！但是，一旦您的技能达到了这一点，那么在您了解 Web 服务器的工作原理之后，这样做是一个很好的教育练习，也将解决您的其他一些问题。

如果您使用已建立的 Web 服务器运行，那么您当然会乐于决定哪一个最不麻烦。 Apache 很强大，但也很大。 Hiawatha 既轻巧又安全，如果不是因为 64 位版本仍然不可用（叹气），将是我的首选，因为在我的旧 XP 机器上运行的 32 位版本使用起来很有趣。 Nginx我知道的很少，但是有人喜欢。警告购买者等等。

【讨论】：