Предварительный просмотр изображения перед загрузкой с использованием FileReader, поворот изображения

Question

Я видел много сообщений при просмотре изображения перед загрузкой. одна должность была очень должна быть простой способ реализовать с помощью 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); 
}); 

но проблема заключается в том, что изображение загружается поворачивается! так ли есть недостающее свойство , что я не хватает? или, может быть, FileReader недостаточно зрел, чтобы понять макет изображения. без понятия!

Возможно, я должен работать с другим методом!? любые идеи по этому вопросу были бы весьма признательны.

благодаря

Answer 1

Я знаю его поздно, чтобы ответить на этот вопрос, но вот ответ

HTML код

<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 Код

$('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/

Это не мой код, нашел его на данной скрипку при поиске одной и той же проблемы.

Answer 2

Это связано с атрибутом Orientation meta на EXIF-информации изображения, как предложено в этом сообщении.

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

значение ориентация предлагается здесь

Accessing JPEG EXIF rotation data in JavaScript on the client side