How to deal with iOS taking upside down picture

Question

I use an input field on a website so that a user can take himself into photo.

On iPad, iPhone, the resulting picture is upside down. How can I easily detect if the user used the camera so that I rotate the image via Javascript ?

I use the picture in a Javascript Canvas after.

I got this input field :

<div class="input-field">
    <label>Choose image or take a picture :</label>
    >input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
</div>

And in JS :

var imageLoader;
imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', _handleImage, false);

function _handleImage( e ){

    var reader = new FileReader();

    reader.onload = function(event){

        picture.onload = function(){
           // The image here is upside down :( I want to turn it to 180 degrees here
           do_stuff( );

        };

        picture.src = event.target.result;

    };
    reader.readAsDataURL(e.target.files[0]);
}

Answer 1

I managed to do it using those libs ( I don't have the links in my mind but search google, those specific versions just works ):

1. Javascript EXIF Reader 0.1.4
2. Binary Ajax 0.1.10

Heres the full code :

HTML :

<div class="input-field">
    <label>Choose image or take a picture :</label>
     <input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
</div>

JS :

var imageLoader, _isUpsideDown = false;
imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', _handleImage, false);

function _handleImage( e ){

    var reader = new FileReader();

    reader.onload = function(event){

        picture.onload = function(){
            // Launch Canvas, display image, etc...
            doStuff();

        };

        picture.src = event.target.result;

    };
    reader.readAsDataURL(e.target.files[0]);

    // Second file reader which will read the file as binaryString to detect the orientation.
    var file = this.files[0];  // file
    filereaderString   = new FileReader; // to read file contents

    filereaderString.onloadend = function() {

        // get EXIF data
        var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));

        // the 3 value means that the image is upside down. 1 is when the image is correct size.
        if( exif.Orientation === 3 ){
            _isUpsideDown = true;
        }

    };

    filereaderString.readAsBinaryString(file); // read the file
}

Answer 2

From which camera? front or rear? Because they are different too and depends what you want from them. I considered the rear camera.

I created some buttons representing what you have to do for each case:

var angle = 0;
$('#portraitButton').on('click', function() {
    angle = 90;
    $("#picture").rotate(angle);
});

$('#landscapeLeft').on('click', function() {
    angle = 180;
    $("#picture").rotate(angle);
});

$('#landscapeRight').on('click', function() {
    angle = 180;
    $("#picture").rotate(angle);
});

$('#upsideDown').on('click', function() {
    angle = -90;
    $("#picture").rotate(angle);
});

The demo is here: http://jsfiddle.net/s6zSn/382/

I hope i could help :)