如何在加载后使用 javascript 获取 <img> 内容类型

Question

在我的 HTML 文档中，有一个图像

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

当在浏览器（例如 Chrome）中打开该文档时，我们可以根据 HTTP 响应标头找到Content-Type该图像位于Chrome 开发者工具 -> 网络选项卡中。"image/png"

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

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

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

Answer 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接口需要异步。返回承诺很方便。

Answer 2

使用 XMLHttpRequest 类型HEAD（类型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请求。