Bad image rotation

Question

I have an issue with JavaScript when rendering an image before upload in a correct rotation. It seems that when you render the image witch have the correct rotation only on exif data the browser doesn't use it.

Users see a different rotation between what they have on their system on when image is displayed on the website by JavaScript.

The code is very basic:

Do you know a simple way to correct this rotation bug ?

LbEmeraude.handleImage = function (f) {
    if (f.type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                var image = {};
                image.dataAsUrl = e.target.result;
                LbEmeraude.renderImage(image);
            };
        })(f);
        var image = reader.readAsDataURL(f);
    }
}

LbEmeraude.renderImage = function (image) {

    var eImage = LbEmeraude.createImgElement(image.dataAsUrl);
    $('someElement').append(eImage);

};

LbEmeraude.createImgElement = function (src) {
    var image = document.createElement("img");
    image.src = src;
    return image;
}

Thank for your attention.

Answer 1

What you are asking for is nothing new... check this out: https://bugzilla.mozilla.org/show_bug.cgi?id=298619

That sucker was opened in 2005 and has not been resolved yet. This article is old but really robust: http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/

But the key part in there is kinda far down where he notes that the browser does not usually apply exif rotation when in the context of an html img tag, but may honor it when opening the image in its own tab.

So right now no browser will do it by default, the web apps that seem to do it are mostly getting that value on the server and serving down different assets.

But it looks like there is hope if you want to hack it in: Accessing JPEG EXIF rotation data in JavaScript on the client side