javascript/jquery：获取远程图像的信息答案

【问题标题】：javascript/jquery: get info for a remote imagejavascript/jquery：获取远程图像的信息
【发布时间】：2012-08-15 02:06:21
【问题描述】：

我有一个“src”指向外部服务器的图像，如下所示：

   <img src="http://somewhere.com/script.php?id=1234">

返回的图片为.png，可以返回为“X”图片或“O”图片。

如何使用 javascript/jquery 确定图像是 X 还是 O？计算加载图像的md5？如果我如何访问图像字节并计算 md5？

【问题讨论】：

如果是 X 或 O，是否真的需要使用 Images 而不是 1 或 0，然后根据返回的内容渲染图像？
是的，我没有其他信息，无论如何都需要显示图像
您确实应该能够按照 GeoPhoenix 的建议进行操作，但您可以通过将其中一张图像设置为高或宽一像素并在加载后使用 JavaScript 检查大小来作弊...
我无法通过图像访问远程服务器，我无法对其进行任何更改

【解决方案1】：

首先，您正在做的事情可能效率很低。因为您从动态 PHP 脚本加载图像，所以大多数浏览器不会缓存它。此外，从您无权访问的其他网站加载图像始终被视为不好的做法。

无论如何，最简单的方法是使用像 PHP 这样的服务器端语言。然后您可以使用curl、fsocketopen、get_headers 或fopen 获取文件大小。通过将此数字与图像的已知文件大小进行比较，您可以知道加载了哪个图像。查看this 页面，了解使用 curl 的示例。

或者，您也可以使用 JavaScript 执行此操作（如果您确实必须这样做）：查看this stackoverflow 问题。

【讨论】：

我在 PHP 上使用返回远程图像哈希的命令 md5_file(...) 做了类似的事情。在 javascript 方面只是检查哈希。
Firefox 出于安全原因阻止您建议的解决方案 javascript-only
@Randomize: 最好使用PHP而不是md5哈希来检查文件大小，因为哈希时需要下载整个文件，而如果您只需要查看文件头你检查文件大小。另外，您为什么（在散列时）使用 Javascript 检查文件大小？然后，您必须将每个图像的哈希值存储在 alt 标记或类似标记中，而使用简单的 if 语句在 PHP 中检查它会更容易。
@Randomize：至于 Javascript-only 方法（我真的认为这更糟）：这似乎是与跨域数据相关的问题。虽然 canvas 支持从另一个域加载图像，但toDataURL() 会抛出一个安全错误，因为这可能是黑客的攻击目标。有一个适用于某些服务器的解决方案，您可以阅读有关here 的更多信息。
@Randomize：或者，您可以创建一个基本上镜像图像的 PHP 脚本：您给它您要打开的图像的 URL，然后它使用 CURL 或 file_get_contents() 加载该图像。因为 Javascript 解析器认为图像位于您的服务器上，所以它不会再引发安全错误。但最大的缺点是图像被加载了两次，所以如果我是你，我会使用 PHP-only 方式。

【解决方案2】：

您可以将图像绘制到画布对象中，然后检查像素。例如。 X 可能会在左上角有一个黑色像素，而 O 会有一个透明或白色像素（当然取决于图像）。

【讨论】：