I am using JavaScript LoadImage.parseMetaData () 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: /

var xhr = new XMLHttpRequest();
xhr.open('GET', '', 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 wele.

I am using JavaScript LoadImage.parseMetaData (https://github./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/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 wele.

• javascript
• exif
• loadimage

• Did you solve this issue? – Marcus Commented Dec 14, 2015 at 14:33
• 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 Commented Dec 15, 2015 at 22:17

3 Answers 3

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 pletes and stuffs the orientation due to the fact they are both asynchronous calls.

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.

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" });
   ...