Javascript 获取像素'；来自外部URL的HTML图像的颜色？

假设我们有一个HTML页面，其中包含一些来自外部域的JPEG图像。目标是使用JavaScript分析该图像的一些颜色数据

解决此问题的常用方法是将图像“转换”为HTML画布并访问颜色数据（请参阅）：

var img=$（“#我的图像”）[0]；
var画布=$（''）[0]；
canvas.width=img.width；
canvas.height=img.height；
canvas.getContext（'2d'）.drawImage（img，0，0，img.width，img.height）；
var pixelInfo=canvas.getContext（'2d'）.getImageData（xOffset，yOffset，1，1）；

但此技术不适用于外部加载的图像，因为尝试使用外部图像访问画布数据会引发安全错误：

SecurityError:未能在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨源数据污染

---

是否有其他方法访问外部图像的颜色数据，或者这是一条死胡同？

您可以在自己的服务器上设置页面代理

页面代理只是一个页面，它获取您想要检索的url上的图像到服务器，然后从该页面将其转发给您。这样，图像就成为脚本运行时的同一原点的一部分

这将适用于PHP、.Net、cgi等，但您需要创建页面及其代码。你很可能会在那里找到很多这样的例子（用谷歌搜索你的特定平台）

如果您无权执行此操作，则只剩下以下选项：

• 手动将图像移动/复制到页面的原点
• 请求CORS使用（要求服务器启用此功能）
• 如果服务器没有，请请求所有者为您的域启用此功能，然后执行CORS请求

CORS请求是通过在图像的标记中指定属性来完成的：

<img src="..." crossOrigin="anonymous">

---

:/.. 据我所知，除非图像是跨原点的，否则你不能做很多事情。stackoverflow上也有类似的情况，除非您是映像的所有者，否则您真的无法更改此参数或解决此问题。是的，我看到了一个关于启用CORS的映像的相关问题：：/然后我很抱歉，但是，除非您是映像的所有者（但这是我的情况）除了请求图像的所有者启用交叉原点之外，你真的做不了什么。。但是，让我们看看，如果其他人有解决方案，我看到的唯一方法是：使用XMLHttpRequest检索文件并手动解码文件。使用png更容易/更快，而且对于jpg来说可能太慢，具体取决于文件大小。正如您所描述的，这是一条死胡同。你可以让你的服务器下载这些图片，然后为它们服务。根据您试图访问的图像类型中嵌入了哪些作者身份数据，这可能/可能不满足CORS。关于，XMLHttpRequests：它们也受CORS限制，无法直接在客户端上访问跨域映像。如果图像数量已知，为什么不现在将图像加载到服务器上，让头痛的问题消失呢？

<img src="..." crossOrigin="anonymous">

 var img = new Image;
 img.onload  = ...
 img.crossOrigin = '';
 img.src = '...';