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

Question

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

解决此问题的常见方法是将图像“转换”为 HTML Canvas 并访问颜色数据(请参阅 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;

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

SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

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

Answer 1

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

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

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

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

• 手动将图像移动/复制到页面的原始位置
• 请求使用 CORS(需要服务器启用此功能)
• 如果服务器没有这样做，请请求所有者为您的域启用此功能，然后执行 CORS 请求

CORS 请求是通过指定图像标签中的属性来完成的:

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

或 JavaScript 中的属性:

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