Image Auto Rotates While Reading Url From File Upload (when It's A Big Image)?

This code below, function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function

Solution 1:

It looks like your image is actually horizontal, but has the orientation meta attribute set to 90 degrees. Such images are automatically rotated by modern image editors (and some browsers when directly linked to), thanks to the information provided by the metadata tag, which could mean why you think it is vertical.

With CSS:

Try applying this css rule to your page and test it with Firefox or Safari:

img {
    image-orientation: from-image;
}

However it is only supported by Firefox and Safari at the moment.

With a 3rd party tool (server-side):

If you are concerned by browser compatibility, you will have to process your images on server-side to remove the metadata and rotate them. Imagemagick can do this with -auto-orient

With Javascript (client-side, browser compatible):

Edit: You can also do this reliably on client side if you parse the metadata and rotate the image accordingly. Or just use JavaScript-Load-Image which can do it for you! Import load-image.all.min.js in your page then just call the loadImage function :

loadImage(
    input.files[0],
    function (img) {
        // this callback will be called with the correctly oriented // image element, inject it in your page ay way you want 
        document.body.appendChild(img);
    },
    {maxWidth: 600} // Options, check the project page for // more of them (scaling, cropping, etc.)
)