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

  • Trouble requiring image module in React Native
  • Cordova Phonegap IOS App Settings.Bundle Possible?
  • Pass variable from Swift to javascript function
  • How to see the javascript errors of PhoneGap app in Xcode?
  • Create a link that either launches iOS app, or redirects to app store
  • Phonegap - Open Navigation Directions in Apple Maps App
  • 4 Solutions Collect From Internet About “Determine orientation of photos in JavaScript?”

    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
    

    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.

    Or if you just want the Orientation tag:

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

    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