这个问题已经被问了很多，但我就是不明白为什么这会发生在我身上。
基本上，我有一个画布和一个图像，当我尝试这样做时：
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'：画布已被跨源数据污染。 at HTMLImageElement.someimage.onload">
我应该提到，我对pograming相当陌生，对javascript更是如此。当我从 file：\\ 运行它时，这应该发生吗？
我还没有发现有人和我有完全相同的问题，人们对其他问题的解释与托管图像的服务器有关。但是在这种情况下，它没有托管在服务器上，所以我对它的工作原理感到困惑。或者更确切地说，不起作用。
出于安全原因，如果您尝试执行某些操作(其中包括画布图像绘制)，如果您使用file://URL，许多浏览器会抱怨。
您确实应该从本地HTTP服务器提供页面和图像，以避免这些限制。
啊，你已经达到了CORS限制，我猜你在谷歌浏览器中遇到了这个问题，谷歌浏览器因是最积极的实施者而臭名昭著。我已经看过很多了。
CORS 是一种协议，用于防止将跨源内容插入网页。它不仅会影响脚本文件(如您所料，因为您不希望任何人能够将恶意脚本注入您的网页)，还会影响图像和字体等资源。
它影响图像的原因是，恶意个人发现他们可以使用HTML5画布对象将网页的内容复制到PNG文件，并随意从中获取个人数据。您可以想象，如果您正在从事网上银行交易，而这种情况发生在您身上会发生什么！
但是，这是您遇到的烦人部分，阻止此类恶意活动也会影响跨源资源的合法使用(例如，将所有图像保存在单独的存储库中)。
那么如何解决这个问题呢？
在火狐上，你应该没有问题。Firefox 对此事应用了一些智能，并认识到来自与您的网页相同的 file://规范的图像实际上并不是跨源的。只要它们与网页位于硬盘驱动器上的同一目录中，它就可以通过这些内容。
另一方面，Chrome的宽容程度要低得多。它将所有此类访问视为跨源访问，并在您尝试在画布上使用 getImageData() 和 putImageData() 时实现安全关闭。
如果您不想麻烦安装和配置自己的本地Web服务器，但仍想使用Chrome及其友好，友好的调试器，则有一种解决方法。您必须创建一个快捷方式，该快捷方式指向您的Chrome可执行文件并在双击它时运行它，但是使用特殊的命令行标志启动Chrome：
--允许从文件访问文件
保存此快捷方式，将其标记为"Chrome调试版本"，以提醒您仅将其用于调试自己的代码(您永远不应该在安全性减弱的情况下访问Internet！)，并且您应该能够调试您的代码而不会出现问题从这一点开始。
但是，如果您要进行大量此类调试，更好的长期解决方案是安装Web服务器，并将其配置为每次使用"localhost"URL时从所需的目录中提供代码。 我知道，这既乏味又耗时，并且分散了您对编码的渴望，但是一旦完成，它就完成了并尘埃落定，并永久解决了您的困境。
如果你真的想测试你的编程技能，你甚至可以编写自己的 Web 服务器来完成这项工作，使用 node.js 服务器端框架之类的东西，但如果你是 JavaScript 的新手，这是一个你最好离开的任务，直到你有更多的经验！但是，一旦你的技能达到这一点，这样做是一个很好的教育练习，一旦你弄清楚了Web服务器的工作原理，它也会解决你的其他一些问题。
如果您使用已建立的Web服务器运行，那么您当然可以享受决定哪一个最不麻烦的乐趣。Apache很强大，但很大。Hiawatha 既轻量又安全，如果不是因为 64 位版本仍然不可用(叹息)，这将是我的首选，因为在我的旧 XP 盒子上运行的 32 位版本使用起来很愉快。Nginx我知之甚少，但有些人喜欢它。警告空洞等等。