如何获取网页中显示的图像的属性答案

【问题标题】：How can I get the properties of an Image which is being dsiplayed in a webpage如何获取网页中显示的图像的属性
【发布时间】：2013-11-25 15:05:39
【问题描述】：

当右键单击网页中的图像并选择“属性”时，会显示详细信息 URL、大小、尺寸、创建（日期）、修改（日期）等。

显然，我知道代码中的 URL，但其他一些不是，例如创建和修改日期，它们必须来自图像源的服务器。我尝试过使用

document.getElementById("photo").attributes

相关的 HTML 代码在哪里

<img id="photo" src="http://www.somesite.com/photo.jpg" width="320" height="240" alt="offline" >

但这仅返回在上述 img 行中找到的 5 个属性。

由于日期和其他信息可用于“属性对话”，我假设文档对象中的某处也可用。

关于如何使用 JavaScript 或 VBScript 访问它们的任何想法？

谢谢....RDK

【问题讨论】：

标签： javascript vbscript domdocument

【解决方案1】：

您是否使用 JavaScript Image object 进行过调查？

【讨论】：

Mark....我查看了该对象，但没有看到/理解它将如何应用于此问题。你能提供更多细节或代码吗？我会再看一遍。谢谢

【解决方案2】：

好吧，您可以尝试获取图像的 URL，然后对图像执行 AJAX 请求，获取响应标头，然后它们会告诉您创建日期等。您正在寻找...

示例...

var myImageURL = %YOUR_IMAGE_URL%
var modifiedHeader = 'Last-Modified';
var req = new XMLHttpRequest();
req.open('HEAD', myImageURL, false);
req.send();
var header = req.getResponseHeader(modifiedHeader);
if (header) {
    console.log(header); // this is the last modified date
}

编辑： ~~仅当图像可通过 AJAX 访问时才有效...（同源策略等...）~~

编辑：

更改为 head 所以现在 SOP 无关紧要.. 谢谢@Musa

【讨论】：

如果你使用 HEAD 请求 SOP 将不会启动
Musa 和@Michael Coxon...感谢您的意见。我尝试使用类似于上面的代码 [link]stackoverflow.com/questions/20176324/… 它适用于某些图像源，但不适用于其他图像源。这就是我尝试这种方式的原因。
@RDK 我提供的代码在 IE 中不起作用。你必须自己做这些覆盖。如果您在任何其他浏览器中尝试它应该可以工作。您可能需要使用 modifiedHeader 变量的大小写来获得所需的结果 - 我不确定 JS 是否从服务器转换大小写。如果没有，您可以使用getAllResponseHeaders 函数，然后您可以解析它返回的数组。
Michael.....不知道我做错了什么，我直接复制了你的代码，更新了网址但它失败了。它执行 req.open("HEAD", myImageURL, false);但没有通过 req.send();
Michael.....在 5 分钟内没有对上述内容进行编辑。不知道我做错了什么，我直接复制了你的代码，更新了网址但它失败了。它执行 req.open("HEAD", myImageURL, false);但没有通过 req.send();现在可能更清楚上面链接中的代码。它适用于某些 URL，但似乎挂在其他 URL 上，即等待 readystate=4 条件。我怀疑某些服务器正在阻止此访问....RDK

【解决方案3】：

创建和修改日期等信息将存储（如果有）在图像的 EXIF 元数据中。

有一个jQuery library for reading EXIF metadata 提供了一个exif() 方法，例如$('img').exif('DateTimeOriginal').

请注意，托管在不同域中的图像将无法被 JavaScript 访问。

关于原始图像文件的宽度和高度的信息应该是图像对象本身的属性，例如document.getElementById('photo').naturalHeight

【讨论】：

Alf...谢谢，我会查一下并试一试...RDK