canvas getImageData 不工作

Question

我尝试获取图像数据，但在控制台中我看到了这个错误：

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at HTMLImageElement.img.onload (file:///C:/Users/HOME/Desktop/programmi/HTML-Javascript/caso/graphic/imgData/arc/main.js:16:17)

这是我的 JavaScript 和 HTML 代码：

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  width = canvas.width = 434, 
height = canvas.height = 362; 

var img = new Image();

img.src = 'https://cdn.pixabay.com/photo/2017/02/26/12/27/oranges-2100108_640.jpg';
//img.crossOrigin = 'Anonymous';

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  var data = ctx.getImageData(10, 10, 11, 11);
  console.log(data)
};

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <canvas id='canvas'></canvas>
  <script type="text/javascript" src='main.js'></script>
</body>

</html>

Answer 1

让我猜猜...您正在使用 Google Chrome 作为您的浏览器。对于此问题，问题最多的浏览器是哪个。

问题集中在所谓的跨站点安全性上。简而言之，现代浏览器旨在防止跨站点内容被加载到浏览器中，除非在特殊条件下，部分是为了阻止恶意代码被注入到您加载的网页中。

这扩展到图像和 HTML5 canvas 数据。原因是，一些偷偷摸摸的人在提供 HTML5 canvas 的早期发现，他们可以使用它来提供您当前浏览器内容的图像快照，并将该快照发回闲暇时细读。如果你当时正在浏览你银行的网站，并在网上进行敏感的金融交易，那么使用这种技术的人将很快能够了解你的财务状况，甚至可能冒充你来突袭你的账户。

这是引入跨站点内容限制的原因之一。

当然，现在有合法跨站点内容的理由。例如将一个人的字体或图像存储在单独的存储库中。问题是，跨站点限制对合法使用和非法使用都有影响。

因此，要想跨站使用图片，就必须遵守CORS协议。但是，为此，您需要由设置为处理 CORS 事务的 Web 服务器提供图像。简单地将 Image 对象的 img.crossOrigin 属性设置为 "anonymous" 不会单独工作：您需要发送图像的 server，设置为响应您的浏览器将发送的飞行前选项请求，然后再从安全角度将图像视为可接受的图像。

这意味着，要解决您的问题，您需要：

[1] 安装本地 Web 服务器来为您执行此任务 - 此选项需要大量阅读 Web 服务器手册，以便正确设置服务器，以及大量编辑配置文件；

[2] 将您自己的服务器写入 node.js 下的运行或类似的 - 此选项涉及更乏味的学习如何编写自己的 Web 服务器，和使该服务器正确处理 CORS 事务。

现在，如果您以 "old school" 方式离线测试代码，Firefox 将允许您通过 file:// 协议从与您的代码相同的目录访问图像，并且不会报错. Firefox 显然有足够的智能来意识到从您的硬盘驱动器的同一目录中提取的图像与您的网页构成同源图像。

但是，如果您使用的是 Google Chrome，则不会。至少，除非你运行它使用特殊的命令行参数。即便如此，Chrome 在被要求处理此类请求时仍有发脾气的倾向。这是一个我经常纠结的问题，虽然有些人可能想告诉我在 Firefox 中进行测试以避免这些问题，但 Chrome 的内部调试器至少对我来说 far 比 Firefox 的调试器更易于使用，在我当前的 Firefox 安装中，它在 Mogadon 上像蜗牛一样爬行，并且表现出友好和流畅的使用让人想起可卡因浸泡的毒蛇。

因此，如果您正在使用 Chrome，因为像我一样，您喜欢它的内部调试器，所以您只能使用我上面给出的两个选项。安装 Web 服务器（Apache、Nginx，随您选择）或安装 Node.js 并编写您自己的服务器。这两个选项都不容易。

canvas getImageData 不工作

canvas getImageData isn't working

html

javascript

getimagedata