4

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)

dee
  • 41
  • 1
  • 4
  • It looks like you rotate the image on client side only. Send rotated file to the server. – Alex Kudryashev Sep 12 '16 at 17:02
  • There is no more code then those i have written for this image displaying. And I have checked the image in server files and it s vertical ( as it has to be ) So it s not saving image horizontal. – dee Sep 12 '16 at 17:10
  • try using `img.src = URL.createObjectURL(file)` instead of reading them as base64 that takes up ~3x more memory – Endless Sep 13 '16 at 10:56

1 Answers1

0

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.)
)
KeatsPeeks
  • 19,126
  • 5
  • 52
  • 83
  • Thanks, as you specified that css rule worked on Firefox and not worked on Chrome. I work on the project also for mobile friendly using. So on tablets and mobiles it s not working right cause chrome is everywhere :/ – dee Sep 12 '16 at 19:18
  • @dee if fixing this server-side is not an option, then you can still fix this on client side. I have edited my answer. – KeatsPeeks Sep 12 '16 at 20:37
  • Couldn t made it with imported that js. That s for on load after select file to the preview image div but my second code makes it. I guess I m gonna try to make image smaller before save it. Cause small images work ok only big images not. Should I try to make smaller in js or in asp.net codebehind? Thanks – dee Sep 12 '16 at 23:09