canvas 已被跨源数据本地图像污染

Question

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

基本上，我有一张 canvas 和一张图片，当我尝试这样做时：

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'：canvas 已被跨源数据污染。在 HTMLImageElement.someimage.onload"

我应该提一下，我对编程相当陌生，对 javascript 更是如此。当我从 file:\\?

运行时应该发生这种情况吗

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

Answer 1

出于安全原因，如果您尝试执行某些操作（canvas 其中的图像绘制），如果您使用 file:// URL.

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

Answer 2

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

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

它影响图像的原因是恶意个人发现他们可以使用 HTML5 canvas 对象将您的网页内容复制到 PNG 文件，并从中收集个人数据will.You 可以想象如果你在网上银行 t运行sactions 而这件事发生在你身上会发生什么！

但是，这是你遇到的烦人的部分，停止这种恶意 activity 也影响跨源资源的合法使用（例如，保留您所有的图像都在一个单独的存储库中）。

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

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

另一方面，

Chrome 宽松得多。它将所有此类访问视为跨域访问，并在您尝试在 canvas.

上使用 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我不太了解，但是有人喜欢。买者自负等等。

canvas 已被跨源数据本地图像污染

The canvas has been tainted by cross-origin data local image

javascript

html

canvas

cors

getimagedata