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

Question

假设我们有一个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'：画布已被跨源数据污染。

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

Answer 1

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

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

这适用于PHP，.Net，cgi等，但您可以创建页面及其代码。你很可能会找到很多这方面的例子（google for your specific platform）。

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

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

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

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

或JavaScript中的属性：

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