Javascript 画布已被跨原点数据本地图像污染

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

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

---

---

我得到了难看的答案：

未捕获的DomeException:未能在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨源数据污染。 在HTMLImageElement.someimage.onload中”

---

我应该提到，我对pogramming相当陌生，对javascript更是如此。当我从文件\ \运行它时，是否应该发生这种情况

---

我还没有发现任何人有和我完全相同的问题，人们对其他问题的解释与图片所在的服务器有关。但在本例中，它不是托管在服务器上的，所以我不清楚它是如何工作的。或者更确切地说，它不起作用。

出于安全原因，如果您尝试做某些事情（其中包括画布图像绘制），如果您使用

文件：//

URL，许多浏览器会抱怨

---

为了避免这些限制，您真的应该从本地HTTP服务器提供页面和图像服务。

啊，您已经达到了CORS限制，我猜您在Google Chrome中遇到了这种情况，Google Chrome以其最激进的实现者而臭名昭著。我已经看过很多了

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

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

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

那你是怎么解决的呢

在Firefox上，您不应该有问题。Firefox在这方面运用了一些智能，并认识到来自与您的网页相同的文件规范的图像实际上不是跨来源的。只要它们与网页位于硬盘上的同一目录中，它就可以让它们通过

另一方面，铬的允许性要低得多。它将所有此类访问视为跨源访问，并在您尝试在画布上使用getImageData（）和putImageData（）时实现安全关闭

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

--允许从文件访问文件

保存此快捷方式，将其标记为“Chrome Debug Version”，以提醒您仅在调试自己的代码时使用此快捷方式（您应该永远不要在安全性减弱的情况下访问Internet！），并且从现在起，您应该能够调试代码而不会出现问题

但是，如果要进行大量此类调试，更好的长期解决方案是安装一个web服务器，并将其配置为每次使用“localhost”URL时从所需目录提供代码。我知道，这很乏味，也很费时，会分散你对编码的渴望，但一旦完成了，它就完成了，并被清理干净，永久地解决了你的烦恼

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

---

当然，如果您使用一个已建立的web服务器运行，那么您就可以很高兴地决定哪一个服务器最麻烦。Apache功能强大，但规模很大。Hiawatha既轻量级又安全，如果不是因为64位版本仍然不可用（叹气），它将是我的首选，因为在我的旧XP机器上运行的32位版本是一种使用乐趣。Nginx我对它知之甚少，但有些人喜欢它。诸如此类的警告。

嗨，安德鲁-说声谢谢很好，但要在回答中评论你的感谢，而不是编辑你的问题。一般来说，您的声誉太低，无法发表评论，但您可以在自己的问题帖中对答案发表评论。：）你好，弗里茨。谢谢你的提醒。我想通过评论来感谢，但是当我在评论链接上徘徊时，我注意到上面写着“避免像“谢谢”这样的评论”，所以我感到困惑并进行了编辑。一点问题也没有，老实说，感谢某人的最好方式是投票给他们的答案（如果你是问题的作者，就接受），如果你不习惯的话，这可能看起来无关紧要，但相信我，我们是为这一点而活的；）（检查并查看第三个要点）我绝对不会抱怨友好，所以谢谢你的尝试！

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);
}