1

I've created a small test site in which you can upload a picture. And without a round-trip to the backend, the selected picture is shown. So far nothing very interesting

$('input').on('change', function () {
    var file = this.files[0];

    var reader = new FileReader();
    reader.onload = function (event) {
        var base64 = event.target.result;
        $('<img>').attr('src', base64).appendTo('body');
    };
    reader.readAsDataURL(file);
});

However, I noticed that on my iPad3 some pictures are shown up-side-down. I found on google about EXIF metadata which is stored in the image (base64) which defines the orientation of the picture. But another thing is, that on my laptop the image are shown normal (with the same pictures of course). Is there any way to prevent/fix this behaviour from happening ? (I want them to show the picture the same way, and if possible I also want them to be shown normal (not up-side-down))

Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333

1 Answers1

1

This is not a CSS issue. It's actually an issue with the image. Some browsers interpret the orientation of the image through meta data. Simply open the image in any image editing software and export it. Upload it to your server and let me know if that worked!

EDIT - Reference this URL for a possible solution: Accessing JPEG EXIF rotation data in JavaScript on the client side

Community
  • 1
  • 1
Ahmed Sagarwala
  • 400
  • 2
  • 13
  • In my case I want to upload a picture and show a preview of it. On mobile devices you can chose to make a new picture or an existing one. So it is hard to expect a someone to do all the pre-processing. Interesting is that when the image is painted on a canvas the original orientation is back – Jeanluca Scaljeri Dec 17 '13 at 07:01
  • 1
    This might help: http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side <- Use JavaScript to detect EXIF data and orient accordingly. – Ahmed Sagarwala Dec 17 '13 at 07:19