Question

我试过getImageData但是在控制台中我看到了这个错误：

未捕获DOMException：无法执行＆＃39; getImageData＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：画布受到跨原始数据的污染。
在HTMLImageElement.img.onload（file：/// C：/Users/HOME/Desktop/programmi/HTML-Javascript/caso/graphic/imgData/arc/main.js:16:17）

这是我的JavaScript和HTML代码：

＆＃13;

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)
};

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <canvas id='canvas'></canvas>
  <script type="text/javascript" src='main.js'></script>
</body>

</html>

＆＃13;

Answer 1

让我猜一下......您使用谷歌浏览器作为浏览器。对于此问题，哪个是最有问题的浏览器。

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

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

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

当然，现在有合法原因可以获得跨网站内容。例如将一个字体或图像存储在单独的存储库中。麻烦的是，跨站点限制会影响合法使用以及非法使用。

因此，为了跨站点使用图像，您必须按照CORS协议进行操作。但是，要做到这一点，您需要由设置为处理CORS事务的Web服务器提供您的映像。只需将Image对象的img.crossOrigin属性设置为＆＃34; anonymous＆＃34;不会自己工作：您需要发送图片的服务器，以便设置为响应您的浏览器将发送的飞行前选项请求，之前从安全的角度来看，允许将图像视为可接受的。

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

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

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

现在，如果你在旧学校离线测试代码＆＃34;方式，Firefox将允许您通过file：//协议访问与代码相同的目录中的图像，并且不会抱怨。 Firefox显然具有足够的智能，可以实现从与您的网页相同的硬盘驱动器目录中提取的图像构成同源图像。

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

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

canvas getImageData不起作用

1 个答案: