从外部 URL 提供的 HTML 图像中获取像素的颜色？答案

【问题标题】：Get pixel's color from an HTML image serving from external URL?从外部 URL 提供的 HTML 图像中获取像素的颜色？
【发布时间】：2014-06-08 00:44:00
【问题描述】：

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

解决此问题的常用方法是将图像“转换”为 HTML 画布并访问颜色数据（参见 https://stackoverflow.com/a/8751659/581204）：

var img = $('#my-image')[0];
var canvas = $('<canvas/>')[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).data;

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

SecurityError：无法在“CanvasRenderingContext2D”上执行“getImageData”：画布已被跨域数据污染。

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

【问题讨论】：

developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image :/.. 据我所知，除非图像启用了跨域功能，否则您无法做太多事情。不过，stackoverflow 上也有类似的情况，除非您是图像的所有者，否则您真的无法更改此参数或解决它。
是的，我看到了一个关于启用 CORS 的图像的相关问题：stackoverflow.com/questions/16869844/… :/
那么我很抱歉，除非您是图像的所有者（但这是我的情况），除了要求图像的所有者启用之外，您真的无能为力跨域.. 但是，让我们看看其他人是否有解决方案
我看到的唯一方法是：使用 XMLHttpRequest 检索文件 + 手动解码文件。使用 png 更容易/更快，对于 jpg 可能太慢，具体取决于文件大小。
当您描述您的需求时，这是一条死胡同。您可以让您的服务器下载图像，然后提供它们。这可能/可能不满足 CORS，具体取决于您尝试访问的图像类型中嵌入的作者数据。关于 XMLHttpRequests：它们也受 CORS 限制，无法直接在客户端访问跨域图像。如果已知图像数量，为什么不现在将图像加载到您的服务器上，让这种头痛消失？

标签： javascript html image image-processing html5-canvas

【解决方案1】：

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

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

这适用于 PHP、.Net、cgi 等，但您需要制作页面及其代码。您很可能会在那里找到很多这样的示例（针对您的特定平台进行谷歌搜索）。

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

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

通过指定图像标签中的任一属性来完成 CORS 请求：

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

或 JavaScript 中的属性：

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

【讨论】：