javascript - preview an image before uploading using FileReader, rotates the image - Stack Overflow

admin管理员组

文章数量:1291163

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

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

• javascript
• filereader
• image-rotation

Share Improve this question Follow asked Sep 28, 2013 at 22:16 ufkufk 32.1k7474 gold badges251251 silver badges414414 bronze badges 2

• You'll have to parse the exif data in the image header, examine the Orientation tag, and rotate accordingly. – Ray Nicholus Commented Sep 28, 2013 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 Commented Nov 10, 2017 at 20:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/AxRJh/

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

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

本文标签： javascriptpreview an image before uploading using FileReaderrotates the imageStack Overflow