从文件上传中读取URL时图像自动旋转（当它是一个大图像时）？

Question

This code below,

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#img_').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#inpFile").change(function () {
        readURL(this);
    });

shows image like this below(this is a 2 MB size image);

horizontal view on image file read

I have solved this problem with this code;

$('#inpFile').change(function (e) {
        var file = e.target.files[0];
        canvasResize(file, {
            width: 300,
            height: 0,
            crop: false,
            quality: 100,
            callback: function (data, width, height) {
                $("#img_").attr('src', data);
            }
        });
    });

I post this file to generic handler then i save it to the file. The image saving to file right rotation but when i try to show them in codebehind with innerHtml it again displays horizontal. (Like this horizontal view on slider )
How can I solve this problem? (I have tested when the image size small no problem but if it s big then problem starts)

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