CODEWITHSUNDEEP
javascripthtmlcssipadsafari
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29097

image shown rotated on iPad and not on laptop

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

Upvotes: 1

Views: 1069

Answers (1)

Ahmed Sagarwala
Ahmed Sagarwala

Reputation: 410

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

Upvotes: 1

Related Questions