How to find original image type using javascript?

Question

I am working in IE10 for a page. In that am using some images. few images were contains false image type(original image type is "png" but it has extension as "jpg"). The false images were broken in IE10(but shows in firefox). How to find the original image type using javascript avoiding the image extension and show in IE10?

need code like

   var imgEle = document.createElement('img');
   imgEle.src = "imagePath/imageName."+findImageType("imagePath/imageName.jpg");

    function findImageType(imagUrl)
    {
      //do stuff
      return imageType;
    }

is it Possible? if not what are the ways to find original image type?

This might help http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html — Osama Javed, Apr 08 '13 at 08:15

score 1 · Answer 1 · answered Apr 08 '13 at 08:14

1

I think you can use an HTTP HEAD request for that (through XMLHttpRequest).

You can get the mime-type of your image with that method, so you should be able to check his true type.

answered Apr 08 '13 at 08:14

TiPi

330
4
19

score 0 · Answer 2 · edited May 23 '17 at 12:13

Using a combination of deokman's answer and adam's from this SO question:

HTTP HEAD Request in Javascript/Ajax?

You could build a function that makes a specific HEAD request to the server that has the image, and then grab out the content type using getResponseHeader("content-type"), you could then translate the different content type strings to actual image extensions. If the server you are requesting the images from correctly calculates the content-type (i.e. not based on extension), then this would be one way.

The other way would be to create a server-side script that actualy analyses the headers of each file (reading the first few bytes of binary data) to determin the image type, and call this again via ajax.

The problem you would get with either method however is you'd have to change the extension before you could display the image, and this would then point to a file that doesn't exist. So the best way to fix the problem is to rename the files with the correct extension in the first place.

How to find original image type using javascript?

2 Answers2