Determine orientation of photos in JavaScript?

Question

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 taken on an iPhone display rotated on the page. We can't reproduce this on any Android devices.

We can rotate the image on the canvas easily enough but how can we determine the required rotation? We tried some EXIF-reading libraries for JavaScript ( exif.js ) but were unable to successfully read the orientation.

Answer 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   = new FileReader;

    fr.onloadend = function() {
        var exif = EXIF.readFromBinaryFile(new BinaryFile(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):

  1        2       3      4         5            6           7          8

888888  888888      88  88      8888888888  88                  88  8888888888
88          88      88  88      88  88      88  88          88  88      88  88
8888      8888    8888  8888    88          8888888888  8888888888          88
88          88      88  88
88          88  888888  888888

Answer 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.

Answer 3

Or if you just want the Orientation tag:

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

Answer 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