HtmlImageElement - 如果src没有扩展名，如何获取图像类型

Question

是否可以像这样使用src获取图像类型（gif，png，jpeg等）？

<img src="http://d1aviatl7dpuhg.cloudfront.net/image/url/64/aHR0cDovL3BpeGNtc2FkbWluLnBpeGFibGUuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE1LzA3L3NoYXJrLmpwZw==">

或由new Image()构造函数创建。

在W3规格中没有找到任何帮助。

我想单独的“XHR get src”是一种解决方案，但也许有更好的方法？

更新：因为CORS，所有类型的XRH都失败了，所以ajax在这里不起作用。

Answer 1

在扩展程序中运行时，以下方法有效（没有CORS限制）

我一直在探索同样的问题，有效的是：

1. 从给定图像src下载图像作为blob
2. blob将在属性blob.type
中包含图像类型

代码示例（使用async / await和fetch API）：

async function getImageBlob(imageUrl) {
    const response = await fetch(imageUrl)
    return response.blob()
}

const blob = await getImageBlob("http://path.to.image.com")
blob.type // Image Content-Type (e.g. "image/png")

Answer 2

http://www.andygup.net/easily-find-image-type-in-javascript/

我想你可以从这个页面得到一些帮助。