Wie kann ich die Ausrichtung eines Bildes anpassen, um eine korrekte Vorschau des Bildes anzuzeigen?

Ich habe eine Laravel-Webanwendung entwickelt, die die Funktion hat, von Benutzern hochgeladene Bilder zu akzeptieren und sie dann anzuzeigen. Ich hatte beim Testen ein Problem festgestellt, als sich mit Mobiltelefonen hochgeladene Fotos um 90 Grad gegen den Uhrzeigersinn drehten. Ich verwendete Bildinterventionen, um dieses Problem zu lösen. Aber da ich den Benutzern eine Vorschau des hochgeladenen Bildes mit Javascript zeige, werden die Bilder um 90 Grad gedreht, aber wenn ich das Bild speichere, wird es richtig. Mein Javascript-Code ist

    function imagePreview(input,elm) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(elm).css("background-image","url('"+e.target.result+"')");
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#settings_img").on("change",function(){
        imagePreview(this,"#settings_img_elm");
    });

Kann mir bitte jemand helfen, das Vorschaubild richtig auszurichten, indem ich den obigen Code so bearbeite, dass sich die Ausrichtung des Bildes bei Bedarf ändert.

Wie wäre es, wenn Sie das Bild nur mit CSS drehen?

reader.onload = function (e) {
    $(elm).css({
        "background-image":"url('"+e.target.result+"')",
        "transform": "rotate(90deg)"
    });
}

Bearbeiten: Nun, nach einem kurzen Eintauchen in die Welt der EXIF-Daten denke ich, dass ich eine Lösung für Sie haben könnte. Ich habe mir Alis geliehen Funktion getOrientation () ausgeliehen , wie @Nick vorgeschlagen hat, und dann habe ich die Ausrichtung mit CSS wie folgt korrigiert:

function correctOrientation(element, orientation){
    switch (orientation) {
      case 2: $(element).css("transform", "scaleX(-1)");
        break;
      case 3: $(element).css("transform", "rotate(180deg)");
        break;
      case 4: $(element).css("transform", "rotate(180deg) scaleX(-1)");
        break;
      case 5: $(element).css("transform", "rotate(-90deg) scaleX(-1)");
        break;
      case 6: $(element).css("transform", "rotate(90deg)");
        break;
      case 7: $(element).css("transform", "rotate(90deg) scaleX(-1)");
        break;
      case 8: $(element).css("transform", "rotate(-90deg)");
        break;
      default: break;
    }
}

Geige

Und wenn Sie zum Testen Beispieldateien benötigen, holen Sie sich diese hier .

Bearbeiten: Platzieren des hochgeladenen Bildes in einem <img>anstelle des Hintergrundbilds des Div: https://jsfiddle.net/ynzvtLe2/2/

Das sollte funktionieren. Hier erhalte ich die ursprüngliche Ausrichtung der Bilddatei und baue dann eine Leinwand mit entsprechender Rotationskorrektur aus. Wir stellen dann das richtig gedrehte Bild als Vorschau ein.

function imagePreview(input,elm) {
    // image file
    var file = input.files[0]; 

    if (!file.type.match('image/jpeg.*')) {
        // image is not a jpeg, do something?
    }

    var reader = new FileReader();
    reader.onload = function(e) {
        var exif = piexif.load(e.target.result);
        var image = new Image();
        image.onload = function () {
            //get original orientation of the uploaded image
            var orientation = exif["0th"][piexif.ImageIFD.Orientation];

            // Build a temperory canvas to manipulate image to required orientation
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var ctx = canvas.getContext("2d");
            var x = 0;
            var y = 0;
            ctx.save();
            if (orientation == 2) {
                x = -canvas.width;
                ctx.scale(-1, 1);
            } else if (orientation == 3) {
                x = -canvas.width;
                y = -canvas.height;
                ctx.scale(-1, -1);
            } else if (orientation == 4) {
                y = -canvas.height;
                ctx.scale(1, -1);
            } else if (orientation == 5) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                y = -canvas.width;
                ctx.scale(1, -1);
            } else if (orientation == 6) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
            } else if (orientation == 7) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                x = -canvas.height;
                ctx.scale(-1, 1);
            } else if (orientation == 8) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                x = -canvas.height;
                y = -canvas.width;
                ctx.scale(-1, -1);
            }
            ctx.drawImage(image, x, y);
            ctx.restore();

            var dataURL = canvas.toDataURL("image/jpeg", 1.0);

            // set the preview image to your element
            $(elm).css("background-image","url('"+dataURL+"')");
        };
        image.src = e.target.result;
    };

    reader.readAsDataURL(file);

}


$("#settings_img").on("change",function(){
    imagePreview(this,"#settings_img_elm");
});

Stellen Sie sicher, dass Sie diese Bibliothek zuerst einschließen: https://github.com/hMatoba/piexifjs

Ich habe Hilfe von der Dokumentation erhalten: https://readthedocs.org/projects/piexif/downloads/pdf/latest/