Determining image MIME type from Loader

[Budda]

Is there a way to determine the image MIME type during/after Phasers Loader() is completed?

 

Currently i'm doing the old file extension check 'n switch during the onLoadComplete function which isn't going to be fool proof for resource URLs with no extension on the end.

extension = name.toLowerCase();extension = extension.substr((Math.max(0, extension.lastIndexOf(".")) || Infinity) + 1);

switch (extension) {

  case 'jpg':

...

 

[yahiko]

If I recall corectly, MIME Type is stored in the property imageData (first bytes).

[qdrj]

extension = extension.substr((Math.max(0, extension.lastIndexOf(".")) || Infinity) + 1);

Offtopic: woah, your code is bulletproof

[Budda]

If I recall correctly, MIME Type is stored in the property imageData (first bytes).

 

I checked the structure of the BitMap and found imagedata but it only had data, width, height in it.

 

The data array just had, well, data in it but nothing in the first bytes other than '0's.

[drhayes]

What are you trying to do?

[Budda]

What are you trying to do?

 

If the image loaded in is a jpeg i run an RGB scan over its pixels and make white ones transparent. if it's a PNG image i don't.

[drhayes]

And you don't know the type ahead of time because it's supplied by the user, or something? Let's play every programmer favorite game, "Change The Question!"

 

If the user is submitting the image for upload you can determine the mime type using a FileReader object to get its magic number and, thus, its mime type: http://www.htmlgoodies.com/html5/tutorials/determine-an-images-type-using-the-javascript-filereader.html

 

If you're post-processing your own stuff you're probably better off running a post-process step as part of your build.

 

I think yahiko's suggestion is good, but I think you got the texture, not the actual image bytes. I'm also pretty sure the browser will only ever give you an Image object which, AFAIK, doesn't get you access to the bytes either.

 

You'll probably have to XHR the image file again but set the responseType to 'arraybuffer'. That will let you create a Uint8Array which will, finally, let you peer at those image bytes. I'm pretty sure the browser won't fetch the file again since it already did it once; caching is a wonderful thing.

 

Do this for every image by listening to Phaser.Loader#onFileComplete and calling this:

cache.getItem(keyGoesHere, Phaser.Cache.IMAGE);

For anything that doesn't return null here, you've got some kind of image. Don't get out of preload until all those XHRs are finished executing.