preview an image before uploading using FileReader, rotates the image

Question

i saw many posts on viewing an image before uploading. one post had a very supposed to be easy method to implement using FileReader:

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#preview_image').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}
}  

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

but the problem is that the image is loaded rotated! so is there a missing property that i'm missing ? or maybe FileReader is not mature enough to understand the layout of an image. no idea!

maybe I should work with a different method !? any ideas regarding the issue would be greatly appreciated.

thanks

You'll have to parse the exif data in the image header, examine the Orientation tag, and rotate accordingly. — Ray Nicholus, Sep 28 '13 at 23:25
I came across same problem. My preview implementation is in Vue.js and working fine. I noticed that if smaller image, it keeps the orientation but if image is larger like 3-4MB it rotates, so uploaed image is also rotated. Not sure why that happens. — Deepak Shrestha, Nov 10 '17 at 20:44

score 5 · Answer 1 · answered Jan 30 '14 at 10:05

I know its late to answer this question but here is an answer

HTML Code

<form method="POST" enctype="multipart/form-data">
    <input type="file" id="file">
    <div id="preview"></div>
    <br>
    <a href="#" id="counter"><- counter</a>
        <select id="degree">
            <option>90</option>
            <option>45</option>
        </select>
    <a href="#" id="clockwise">clockwise -></a>
    <hr>
    <button type="submit">save image</button>
</form>

Javascript Code

$('a').click(function(){
    var a = $('img').getRotateAngle();
    var d = Math.abs($('#degree').val());

    if($(this).attr('id') == 'counter'){
       //d = -Math.abs(+a - +d);
        d = a - d;
    }
    else{d = +a + +d;}

    $('img').rotate({animateTo:d});
});

/* image preview */
$('#file').change(function(){
    var oFReader = new FileReader();
    oFReader.readAsDataURL(this.files[0]);
    console.log(this.files[0]);
    oFReader.onload = function (oFREvent) {
        $('#preview').html('<img src="'+oFREvent.target.result+'">');
    };
});

CSS

#preview img {
    max-height: 300px;
    max-width: 300px;
}

http://jsfiddle.net/AxRJh/

This is not my code ,found it on given fiddle when searching for the same problem.

score 1 · Answer 2 · answered Nov 10 '17 at 21:05

It is due to the Orientation meta attribute on picture's EXIF information as suggested in this post.

image auto rotates while reading url from file upload (when it's a big image)?

Orientation values are suggested here

Accessing JPEG EXIF rotation data in JavaScript on the client side

preview an image before uploading using FileReader, rotates the image

2 Answers2