HtmlImageElement - how to get image type if its src has no extension

Question

Is it possible to get image type (gif, png, jpeg, etc.) using src, like this?

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

or created by the constructor new Image().

We did not find anything useful in the W3 specifications.

I assume that a separate “XHR get src” is a kind of solution, but maybe there is a better way?

Update: all kinds of XRH do not work due to CORS, so ajax will not work here.

Answer 1

The following steps are performed during the extension (which does not have CORS restrictions)

I studied the same question what works:

• Download image from this image srcas blob
• The block will display the type of image in the property blob.type

( API- async/await fetch):

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/

, .