Question

这个问题已被问到很多，但我不明白为什么会发生这种情况。

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

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

我得到了不雅观：

＆＃34; 未捕获的DOMException：无法执行＆＃39; getImageData＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：画布已被跨源数据污染。在HTMLImageElement.someimage.onload ＆＃34;

我应该提到我对编程很新，甚至更多的是javascript。当我从文件：\\？

运行它时，是否会发生这种情况

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

Answer 1

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

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

Answer 2

啊，你已经达到了CORS限制，我猜这里你在谷歌Chrome中遇到了这个问题，因为谷歌Chrome是最积极的实施者。我见过这很多。

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

它影响图像的原因是因为恶意个体发现他们可以使用HTML5画布对象将网页内容复制到PNG文件中，并随意记录个人数据。你可以想象会发生什么如果您正在进行网上银行交易，而这发生在您身上！

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

那你怎么解决这个问题？

在Firefox上，你应该没有问题。 Firefox对此问题应用了一些智能，并认识到来自与您的网页相同的文件：//规范的图像实际上并不是跨源的。它允许这些通过，只要它们与您的网页位于硬盘驱动器上的相同目录中。

另一方面，Chrome非常不那么宽容。它将所有此类访问视为跨源访问，并在您尝试在画布上使用getImageData（）和putImageData（）时实现安全性关闭。

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

- 允许文件存取从-文件

保存此快捷方式，将其标记为“Chrome调试版”，以提醒您仅使用它来调试您自己的代码（您应该从不访问互联网，安全性较差！），以及应该能够在没有问题的情况下调试代码。

但是，如果您要进行大量此类调试，那么更好的长期解决方案是安装Web服务器，并将其配置为提供来自的代码。每次使用“localhost”URL时所需的目录。我知道，这是繁琐而耗时的，并且会分散您对编码的渴望，但一旦完成，它就会完成并拂去，并永久地解决您的困境。

如果确实希望将您的编程技巧用于测试，您甚至可以编写自己的Web服务器来完成这项工作，使用类似node.js服务器端框架，但如果您对JavaScript来说是新手，这是一个你最好离开的任务，直到你有很多更多的经验！但是，一旦你的技能达到了这一点，那么一旦你弄清楚了网络服务器是如何运作的，这样做是一个很好的教育练习，也可以解决你的其他一些问题。

如果您使用已建立的Web服务器运行，那么您当然可以决定哪一个涉及最少的麻烦。 Apache功能强大，但功能强大。 Hiawatha既轻巧又安全，如果不是因为64位版本仍不可用（叹气），将成为我的第一选择，因为在我的旧XP机器上运行的32位版本是一种使用的乐趣。 Nginx我知之甚少，但有些人喜欢它。警告和所有这些。

画布受到跨源数据本地图像

2 个答案: