加载后如何使用 javascript 获取 <image> 内容类型答案

【问题标题】：How to get <img> content-type using javascript after loading加载后如何使用 javascript 获取 <image> 内容类型
【发布时间】：2017-09-14 00:59:04
【问题描述】：

在我的 HTML 文档中，有一张图片

<img src="https://www.gravatar.com/avatar/1d9c87a4d5cbcae4c76e867cb6861fa0?s=48&d=identicon&r=PG&f=1"/>

在浏览器中打开此文档时，例如Chrome，我们可以根据HTTP响应头在Chrome开发者工具->网络选项卡中找到这张图片的Content-Type是"image/png"。

如何在图像加载后使用 JavaScript 获取Content-Type。

更具体地说，我需要的是如下所示的函数。

/**
 * @param  {HTMLImageElement} img
 * @return {String}     the content type, e.g. "image/png", "image/svg+xml"
 */
getImgContentType(img) {
    // TODO
}

【问题讨论】：

您可以使用console.log 找出自己吗？
你是如何加载图片的，只是<img>标签im HTML或通过JS？
向图片的 url 创建一个 HEAD 类型的 XMLHttpRequest。
.... 当然，这只能在 CORS 的范围内 :-)
@ibrahimmahrir - “输入HEAD到图片的URL”?

标签： javascript image mime-types

【解决方案1】：

您需要发出 HEAD 请求来获取标头。这是另一个使用fetch API 的简单版本，如下所示：

getImgContentType (img) {
  return fetch(img.src, { method: 'HEAD' })
    .then(response => response.headers.get('Content-type'))
}

用法如下：

obj.getImgContentType().then(type => {
  console.log(type)
})

还要注意，getImgContentType 的接口需要是异步的。返回promise很方便。

【讨论】：

【解决方案2】：

使用HEAD类型的XMLHttpRequest（HEAD类型表示请求只会接收头部数据，不会重新下载图片）：

getImgContentType(img) {
    var xhr = new XMLHttpRequest();
    xhr.open("HEAD", img.src, true);
    xhr.onreadystatechange = function() {
        if (this.readyState == this.DONE) {
            console.log(xhr.getResponseHeader("Content-Type"));   // type
            console.log(xhr.getResponseHeader("Content-Length")); // size
            // ...
        }
    };
    xhr.send();
}

请注意，并非所有服务器都实现HEAD 请求。

【讨论】：

....并且服务器需要通过发送相应的头信息来接受跨源请求（CORS）
@devnull69 我几乎每天都在使用这种方法，而且我从未遇到过 CORS 问题。我认为 CORS 仅适用于方法为 GET 或请求的文件不是图像、视频等时...您知道可以从任何地方访问的员工。
@devnull69 无需担心 HEAD 请求（如果您不发送自定义请求标头，在这种情况下我们不会发送）。
那么他就可以像 img 元素一样发出完全相同的请求，无论如何它都会使用缓存。
@GentleMint HEAD 请求的大小小于 GET 请求。 GET 请求包含元数据（大小、内容类型、...）和实际数据（图像）。 HEAD 仅重新下载元数据（几个字节）。但这取决于网络速度和许多其他因素，因此可能会很慢，但这是唯一的方法。