Can't get EXIF info using loadImage.parseMetaData

Question

I am using JavaScript LoadImage.parseMetaData (https://github.com/blueimp/JavaScript-Load-Image) to try and get Orientation of an image on the web, so I can rotate it.

If I hardcode the orientation (see "orientation: 3" in my second loadImage call), I can rotate it... but I am trying to use loadImage.parseMetaData to get the Orientation.

I have used web based EXIF parsers and the orientation info is there in the image.

When I call loadImage.parseMetaData "data.exif" seems to be null. See this fiddle: http://jsfiddle.net/aginsburg/GgrTM/13/

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.filepicker.io/api/file/U0D9Nb9gThy0fFbkrLJP', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
    if (this.status == 200) {
        // Note: .response instead of .responseText
        console.log ("got image");
        var blob = new Blob([this.response], {type: 'image/png'});
        console.log("about to parse blob:" + _.pairs(this.response));
        loadImage.parseMetaData(blob, function (data) {
            console.log("EXIF:" + _.pairs(data))
            var ori ="initial";
            if (data.exif) {
                ori = data.exif.get('Orientation');
            }
            console.log("ori is:" + ori);
        });

         var loadingImage = loadImage(
            blob,
            function (img) {
                console.log("in loadingImage");
                document.body.appendChild(img);
            },
            {maxWidth: 600,
             orientation: 3, 
             canvas: true,
             crossOrigin:'anonymous'
            }
        );
        if (!loadingImage) {
            // Alternative code ...
        }

    }
};
xhr.send();

Any ideas or alternative approaches to correctly orientating images welcome.

Mmm. I stopped using Filepicker... and have recently moved back to it now they pass back mimetype in the blob after a sucessful upload. So I never tested out the proposed solutions below as they became redundant. Not sure how I am meant to mark the question here on Stackoverflow? — aginsburg, Dec 15 '15 at 22:17

score 2 · Answer 1 · answered Sep 10 '15 at 20:49

Your call to loadImage needs to be inside the callback from the call to parseMetaData.

The reason: as is, your code contains a race condition. The call the loadImage is very likely to be made BEFORE the call the parseMetaData completes and stuffs the orientation due to the fact they are both asynchronous calls.

score 1 · Answer 2 · answered Aug 04 '14 at 19:03

1

Why are you making a new blob whereas you asked for a Blob? The metadata are then lost, this is why you are losing it and exif is null. Just replace :

var blob = new Blob([this.response], {type: 'image/png'});

By:

var blob = this.response;

Should do the trick.

answered Aug 04 '14 at 19:03

MaX

118
13

Thanks @MaX. I did replace in the jsfiddle and had originally tried this too... I still see "ori is:undefined " in the console log. – aginsburg Aug 06 '14 at 00:36

score 1 · Answer 3 · answered Aug 21 '15 at 15:53

Had the same problem, I changed the reponse type for 'arrayBuffer' and then create the blob from the response

xhr.responseType = 'arraybuffer';

xhr.onload = function (e) {
if (this.status == 200) {
   var arrayBufferView = new Uint8Array(this.response);
   var blob = new Blob([arrayBufferView], { type: "image/jpeg" });
   ...

Can't get EXIF info using loadImage.parseMetaData

3 Answers3

Linked