Determine Orientation Of Photos In Javascript?

We're using FileReader to get an image, from a photo taken on an iPhone, into the browser. We then use drawImage() to draw that image onto a canvas. The problem is that photos take

Solution 1:

Ok, so it looks like you in fact can read the exif data using exif.js.

$("input").change(function() {
    var file = this.files[0];
    fr   = newFileReader;

    fr.onloadend = function() {
        var exif = EXIF.readFromBinaryFile(newBinaryFile(this.result));
        alert(exif.Orientation);
    };

    fr.readAsBinaryString(file);
});

This code is using exif.js and binaryajax.js.

This works but only if you try it out with a photo taken on ios. I think android just rotates the actual image and orientation is always 1 so they don't even write out the orientation to exif. Hence we were fooled into thinking it wasn't working.

For images that do have orientation, the value is readable and can be interpreted as below (those are F's btw):

1234567888888888888888888888888888888888888888888888888888888888888888888888      8888    8888  8888    888888888888888888888888888888888888888888888888

Solution 2:

Works great even without binaryajax.js

Just use

EXIF.getData(changeEvent.target.files[0], function () {
    alert(EXIF.pretty(this));                            
});

Also here you could see another examples.

Solution 3:

Or if you just want the Orientation tag:

EXIF.getData(file, function () {
    alert(this.exifdata.Orientation);
});

Solution 4:

my two cents is that the exif-js framework does not work for me and is not required.

instead what you can do is 'onload' of your image src, create a canvas, then draw your canvas overtop of your image, what this accomplishes is getting rid of any iphone related 'exif' rotation of the image, because the canvas drawImage erases exif data.

when the draw is complete, you will see your image 'rotate' back to how it would look on a PC browser