die Vorschau eines Bildes vor dem hochladen mit FileReader, dreht sich das Bild

ich sah viele Beiträge in Leser ein Bild vor dem hochladen.
einen Beitrag hatte eine sehr soll einfach sein-Methode zu implementieren, mit 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);
});

aber das problem ist, dass das Bild geladen wird gedreht! so ist es eine fehlende Eigenschaft
dass ich bin fehlt ? oder vielleicht FileReader ist nicht reif genug, um zu verstehen, das layout
von einem Bild. keine Ahnung!

vielleicht sollte ich die Arbeit mit einer anderen Methode !?
irgendwelche Ideen, was das Thema würde sehr geschätzt werden.

Dank

  • Sie haben zum analysieren der exif-Daten im header des Bildes, prüfen Sie die Orientierung tag, und drehen Sie Sie entsprechend.
  • Ich stieß auf das gleiche problem. Mein Album Vorhören Umsetzung ist in Vue.js und fein arbeiten. Ich bemerkte, dass, wenn kleinere Bild, bleibt die Orientierung, aber wenn das Bild größer wie 3-4MB es dreht sich, so dass uploaed Bild wird ebenfalls gedreht. Nicht sicher, warum das passiert.
InformationsquelleAutor ufk | 2013-09-28
  1. 5

    Ich weiß, das ist spät, diese Frage zu beantworten, aber hier ist eine Antwort

    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/

    Dies ist nicht mein code ,fand es auf gegeben Fiedel bei der Suche nach dem gleichen problem.

    InformationsquelleAutor Ravi
  2. 0

    Ist es aufgrund der Orientierung meta-Attribut auf EXIF-Informationen, wie vorgeschlagen, in diesem post.

    Bild auto dreht sich beim Lesen der url-Datei hochladen (wenn es ein großes Bild)?

    Orientierung sind Werte, die hier vorgeschlagen

    Zugriff auf JPEG-EXIF-rotation-Daten in JavaScript auf der client-Seite

    InformationsquelleAutor Laraveldeep
Schreibe einen Kommentar