Image rotated 90 degrees when taken a selfie

Question

I am not sure how to explain this, but i will try my best. I have requirement to build a web app, where the user can take his pic and upload to server. When I try i take a selfie on portrait or landscape mode and preview it. Image seem to be rotated 90 degrees.

How can I fix this while previewing the image

 <input type="file">
 <div class="preview-nodeCenter nodeCenter fadeChange">
 </div>

Onload I am setting the image as background for the div.

$('input').change(function() {
    var fr = new FileReader;
    fr.onload = function() { 
        var data = fr.result;
        $( ".nodeCenter" ).css( "background-image", 'url(' + data + ')' );
        //img.src = fr.result;
    };
    fr.readAsDataURL(this.files[0]);
});

Here is the link to fiddle http://jsfiddle.net/vh9ecjej/1/

Try to take a selfie from your phone or upload an pic that was taken on your phone (I use iphone for testing)

Answer 1

In cameras rotation usually is done using EXIF data, you can use exif-js library with this code:

$('input').change(function() {
    var fr = new FileReader;
    fr.onload = function() {
        var data = fr.result;
        var node = $( ".nodeCenter" ).css( "background-image", 'url(' + data + ')' );
        var image = new Image();
        image.onload = function() {
            EXIF.getData(image, function() {
                var orientation = EXIF.getTag(this, "Orientation");
                switch(orientation) {
                    case 3:
                        node.css('transform', 'rotate(180deg)');
                        break;
                    case 6:
                        node.css('transform', 'rotate(90deg)');
                        break;
                    case 8:
                        node.css('transform', 'rotate(-90deg)');
                        break;
                }
            });
        };
        image.src = data;
        //img.src = fr.result;
    };
    fr.readAsDataURL(this.files[0]);
});

JSFIDDLE

the code don't take into account flipping since I don't think they ever happen using camera, all Orientation tag values can be found here.