canvas 已被跨源数据本地图像污染
The canvas has been tainted by cross-origin data local image
这个问题已经被问了很多，但我就是不明白为什么会发生在我身上。
基本上，我有一张 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:\\?
运行 时应该发生这种情况吗
我还没有发现任何人遇到与我完全相同的问题，人们对其他问题的解释与托管图像的服务器有关。但在这种情况下，它没有托管在服务器上，所以我对它的工作原理感到困惑。或者更确切地说，不起作用。
出于安全原因，如果您尝试执行某些操作（canvas 其中的图像绘制），如果您使用 file:// URL.
您确实应该从本地 HTTP 服务器提供页面和图像以避免这些限制。
啊，你已经达到了 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 和一张图片，当我尝试这样做时：
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:\\?
运行 时应该发生这种情况吗我还没有发现任何人遇到与我完全相同的问题，人们对其他问题的解释与托管图像的服务器有关。但在这种情况下，它没有托管在服务器上，所以我对它的工作原理感到困惑。或者更确切地说，不起作用。
出于安全原因，如果您尝试执行某些操作（canvas 其中的图像绘制），如果您使用 file:// URL.
您确实应该从本地 HTTP 服务器提供页面和图像以避免这些限制。
啊，你已经达到了 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我不太了解，但是有人喜欢。买者自负等等。