Question

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

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

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

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

更具体地说，我需要的是如下功能。

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

Answer 1

使用类型为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次请求。

Answer 2

您需要提出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的接口需要是异步的。回报承诺很方便。

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

2 个答案: