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.
Antworten:
Wie wäre es, wenn Sie das Bild nur mit CSS drehen?
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:
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/quelle
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.
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/
quelle