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

8

Geben Sie hier die Bildbeschreibung einGeben Sie hier die Bildbeschreibung einGeben Sie hier die Bildbeschreibung einIch 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.

Jeffrin Jose
quelle
Ich habe diese Codes ausprobiert, aber ich konnte keine ordnungsgemäße Ausgabe erhalten. Ich bin neu in der Webentwicklung und möchte daher, dass jemand meinen Code für mich bearbeitet. @ Nick
Jeffrin Jose

Antworten:

4

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/

DingJedes
quelle
Das Problem dabei ist, dass es Telefone gibt, die eine Vorschau des Bildes mit der richtigen Ausrichtung anzeigen. Daher wird die CSS-Drehung mit diesen Bildern in Konflikt
geraten.
Ok, ich habe meine Antwort bearbeitet. Bitte probieren Sie es aus.
DingJedes
Ich möchte nur wissen, wie ich das in meinen Code einfügen kann. Ich bin neu in diesem Bereich.
Könnten
@ JeffrinJose Ja, Bruder. Ich habe das gemacht. Gehen Sie einfach hier jsfiddle.net/n5sm7ucf/1 und kopieren Sie alles aus der Javascript-Box. (Ersetzen Sie Ihren JS-Code durch diesen.) Oh, Sie benötigen auch das CSS. Sie können jQuery jedoch verwenden, um dies programmgesteuert hinzuzufügen, wenn Sie dies wirklich wollten, genau wie Sie es in Ihrer Funktion 'imagePreview' getan haben.
DingJeder
@ JeffrinJose Wenn du immer noch feststeckst, @ ich.
DingJeder
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/

Sapnesh Naik
quelle
Wenn ich diesen Code in meiner Javascript-Datei anstelle des oben angegebenen Codes ersetze, funktioniert dann alles ordnungsgemäß?
Jeffrin Jose
1
@ Jeffrey Jose Ja. Bitte versuchen Sie das
Sapnesh Naik
Ich habe es versucht, aber das Vorschaubild ist nur nicht sichtbar
Jeffrin Jose
Gibt
@ JeffrinJose hast du die Bibliothek richtig aufgenommen?
Sapnesh Naik