Javascript canvas getImageData是'；行不通

我尝试获取ImageData，但在控制台中我看到以下错误：

未捕获的DomeException:未能在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨源数据污染。
在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'），
宽度=画布。宽度=434，
高度=画布。高度=362；
var img=新图像（）；
img.src=https://cdn.pixabay.com/photo/2017/02/26/12/27/oranges-2100108_640.jpg';
//img.crossOrigin='匿名'；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
var data=ctx.getImageData（10,10,11,11）；
console.log（数据）
};
让我猜猜。。。您正在使用Google Chrome作为浏览器。这是本期最有问题的浏览器

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

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

这就是对跨网站内容进行限制的原因之一

当然，现在拥有跨站点内容有合法的理由。例如将字体或图像存储在单独的存储库中。麻烦的是，跨站点限制既影响合法使用，也影响非法使用

因此，为了跨站点使用图像，您必须遵守CORS协议。但是，要做到这一点，您需要由设置为处理CORS事务的web服务器提供图像。仅仅将图像对象的img.crossOrigin属性设置为“匿名”本身是行不通的：您需要将发送图像的服务器设置为响应浏览器将发送的飞行前选项请求，然后才能从安全角度将图像视为可接受的

也就是说，要解决您的问题，您需要：

[1] 安装一个本地web服务器来为您执行此任务-此选项需要花费大量时间阅读web服务器手册，以便正确设置服务器，并对配置文件进行大量编辑

[2] 编写您自己的服务器以在node.js或类似文件下运行-此选项涉及到更繁琐的学习如何编写您自己的web服务器，和使该服务器正确处理CORS事务

现在，如果您以“老派”的方式离线测试代码，Firefox将允许您通过file://协议从与代码相同的目录访问图像，并且不会抱怨。Firefox显然具有足够的智能，能够意识到从硬盘驱动器的同一目录中提取的图像与网页构成同一原始图像

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

所以，如果您使用的是Chrome，因为和我一样，您也喜欢它的内部调试器，您必须使用我上面给出的两个选项。要么安装web服务器（Apache、Nginx，随便你选），要么安装Node.js并编写自己的。这两个选项都不容易。
我想您已经访问过了，因为您尝试了
img.crossOrigin='Anonymous'
。但只有当您从中加载映像的服务器允许时，它才能工作。显然情况并非如此。您必须加载存储在您自己的服务器（或者本地主机，如果您在本地开发）上的图像。我没有任何本地主机。我尝试下载图像并加载，但结果是相同的网页和图像需要从同一台服务器上加载。一些浏览器将进一步限制本地文件访问