我尝试获取ImageData，但在控制台中我看到此错误:
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>最佳答案
让我猜猜...您正在使用 Google Chrome 作为浏览器。这是此问题最严重的浏览器。
问题集中在所谓的跨站点安全性上。简而言之，现代浏览器旨在防止跨站点内容加载到浏览器中(特殊情况除外)，部分原因是为了阻止恶意代码注入(inject)到您加载的网页中。
这扩展到图像和 HTML5 Canvas 数据。原因是，一些偷偷摸摸的人在提供 HTML5 Canvas 的早期发现，他们可以使用它来提供当前浏览器内容的图像快照，并将该快照发送回来以供闲暇时阅读。如果您当时正在浏览银行的网站，并在网上进行敏感的金融交易，那么使用此技术的人很快就能了解您的财务状况，甚至可能冒充您来突袭您的帐户。
这是引入跨网站内容限制的原因之一。
现在，当然，拥有跨站点内容是有合法理由的。例如将一个人的字体或图像存储在单独的存储库中。问题是，跨站点限制会影响合法使用和非法使用。
因此，为了跨站使用图片，就必须遵守CORS协议(protocol)。但是，为此，您需要由设置为处理 CORS 事务的 Web 服务器提供图像。简单地将图像对象的 img.crossOrigin 属性设置为“匿名”本身是行不通的:您需要发送图像的服务器，将其设置为响应飞行前从安全 Angular 来看，在允许图像被视为可接受之前，您的浏览器将发送选项请求。
这意味着，要解决您的问题，您需要:
[1] 安装本地 Web 服务器来为您执行此任务 - 此选项涉及大量乏味的阅读 Web 服务器手册，以便正确设置服务器，以及大量编辑配置文件；
[2] 编写您自己的服务器以在 node.js 或类似的环境下运行 - 此选项涉及更乏味的学习如何编写您自己的 Web 服务器，并使该服务器正确处理 CORS 事务。
现在，如果您以“老派”方式离线测试代码，Firefox 将允许您通过 file://协议(protocol)从与代码相同的目录访问图像，并且不会提示。 Firefox 显然有足够的智能来认识到从硬盘驱动器的与网页相同的目录中提取的图像构成了同源图像。
但是，如果您使用的是 Google Chrome，则不会。至少，除非您使用特殊的命令行参数运行它。即便如此，当 Chrome 被要求处理此类请求时，它仍然倾向于发脾气。这是我经常遇到的一个问题，尽管有些人可能会告诉我在 Firefox 中进行测试以避免这些问题，但至少对我来说，Chrome 的内部调试器使用起来远更令人愉快与 Firefox 的调试器相比，在我当前安装的 Firefox 中，它像 Mogadon 上的蜗牛一样爬行，并且表现出友好和流畅的使用，让人想起可卡因浸泡的毒蛇。
所以，如果您使用 Chrome，因为像我一样，您喜欢它的内部调试器，那么您将不得不使用我上面给出的两个选项。安装 Web 服务器(Apache、Nginx，任您选择)或安装 Node.js 并编写您自己的服务器。这两种选择都不容易。
关于javascript - Canvas getImageData 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43005266/