HtmlImageElement - how to get image type if its src doesn't have extension

Question

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

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

or created by new Image() constructor.

Haven't found anything helpful in W3 specs.

I guess that a separate "XHR get src" is sort of a solution, but maybe there is a better way?

Update: all sorts of XRHs are failing because of CORS, so ajax won't work here.

Answer 1

The following works when run in an extension (which doesn't have CORS restrictions)

I've been exploring this same question, what works is the following:

1. Download the image from the given image src as a blob
2. The blob will have the image type in the property blob.type

Code sample (with async/await and 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/

I think you may get some help from this page.