Get image extension

Valentinor

Is there a way to get the extension of an image if you know it's link? At first I thought of splitting the string with . and get the last part, but the problem with this is that there are some links that don't include the extension at the end so this is not an universal solution. Because I know the link each time, is there something I can do with an image object (new Image), or how else can I get the extension? All the results I got were to check if it is an image but not it's extension, or the one I explained above, but that won't work in every scenarios. This will be done in a extension for Firefox.

Blanksy

mebbe something like... file = url.split('/').pop();

Valentinor

Unfortunately like I said, there are some website where the file name and the extensions is not included into the link, so there is nothing to split to get them. But even then, if you use the built-in "Save Image As...", the browser still knows what those are, so there has to be a way to do it.

Richard Deeming

The browser doesn't use the image extension; it uses the MIME-type, which is supplied in the Content-Type header. To read this from Javascript, either the image will need to be on the same domain as your page, or the remote domain will need to set the CORS headers to allow your site to request the image. Cross-Origin Resource Sharing (CORS) - HTTP | MDN[^] image - How to get <img> content-type using javascript after loading - Stack Overflow[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Valentinor

Richard Deeming wrote: To read this from Javascript, either the image will need to be on the same domain as your page, or the remote domain will need to set the CORS headers to allow your site to request the image.

Because this will not work in Javascrip with all websites which we actually need, in what other language can it be done? I do apologies, web applications is not what I normally do, but this time I have to do it and learn for the future, maybe I'll run into something similar.

Richard Deeming

You'd have to write something on the server - eg: ASP.NET, PHP, etc. Basically, any server-side language that can make a HEAD request and read the headers from the response. For example, in C#:

public static async Task<string> GetContentType(HttpClient client, string url)
{
if (string.IsNullOrEmpty(url)) throw new ArgumentNullException(nameof(url));
if (!Uri.TryCreate(url, UriKind.Absolute, out var uri)) throw new ArgumentException("Invalid URL", nameof(url));

using (var request = new HttpRequestMessage(HttpMethod.Head, uri))
using (var response = await client.SendAsync(request, HttpCompletionOption.ResponseHeadersRead))
{
    response.EnsureSuccessStatusCode();
    return response.Content.Headers.ContentType.MediaType;
}

}

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Valentinor

We don't have any control over the server, this is goin to be done in a extension for Firefox. We added a new contextMenu for images only, and from that we can get the Url, but as I said in the first thread there are some websites that don't add the name and the extension directly into the link (example.com/image.jpg / example.com/someImage), so we need to find another way to get them when the user right click's on it.

Richard Deeming

Once again, there may not be an image extension. You will have to use the content type. It looks like it is possible to request extra permissions to your extension to bypass CORS restrictions for certain domains: permissions - Mozilla | MDN[^] But it may be easier to intercept the network requests from your extension: Intercept HTTP requests - Mozilla | MDN[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Valentinor

Richard Deeming wrote:

But it may be easier to intercept the network requests from your extension: Intercept HTTP requests - Mozilla | MDN[^]

I'll try this and see if I manage to make something using it. I first thought this whole thing will be something easy. :)