Digitalkamera-Fotos werden häufig als JPEG mit einem EXIF-Tag "Orientierung" gespeichert. Um korrekt angezeigt zu werden, müssen Bilder je nach eingestellter Ausrichtung gedreht / gespiegelt werden. Browser ignorieren diese Informationen jedoch, um das Bild zu rendern. Selbst in großen kommerziellen Web-Apps kann die Unterstützung für die EXIF-Ausrichtung nur sporadisch sein 1 . Dieselbe Quelle bietet auch eine schöne Zusammenfassung der 8 verschiedenen Ausrichtungen, die ein JPEG haben kann:

Beispielbilder sind unter 4 verfügbar .

Die Frage ist, wie das Bild auf der Clientseite gedreht / gespiegelt werden kann, damit es korrekt angezeigt wird und bei Bedarf weiterverarbeitet werden kann.

Zum Parsen von EXIF-Daten stehen JS-Bibliotheken zur Verfügung, einschließlich des Orientierungsattributs 2 . Flickr stellte ein mögliches Leistungsproblem beim Parsen großer Bilder fest, für das Webworker erforderlich sind 3 .

Konsolenwerkzeuge können die Bilder korrekt neu ausrichten 5 . Ein PHP-Skript zur Lösung des Problems finden Sie unter 6

Das Github-Projekt JavaScript-Load-Image bietet eine vollständige Lösung für das EXIF-Orientierungsproblem, indem Bilder für alle 8 Exif-Orientierungen korrekt gedreht / gespiegelt werden. Siehe die Online-Demo der Javascript-Exif-Orientierung

Das Bild wird auf eine HTML5-Leinwand gezeichnet. Das korrekte Rendern wird in js / load-image-Orientierung.js durch Canvas-Operationen implementiert .

Hoffe, das spart jemand anderem etwas Zeit und bringt den Suchmaschinen etwas über dieses Open-Source-Juwel bei :)

Mederrs Kontexttransformation funktioniert perfekt. Wenn Sie die Orientierung extrahieren müssen, verwenden Sie nur diese Funktion - Sie benötigen keine EXIF-Lesebibliotheken. Unten finden Sie eine Funktion zum Zurücksetzen der Ausrichtung im base64-Bild. Hier ist eine Geige dafür . Ich habe auch eine Geige mit Orientierungs-Extraktions-Demo vorbereitet .

function resetOrientation(srcBase64, srcOrientation, callback) {
  var img = new Image();    

  img.onload = function() {
    var width = img.width,
        height = img.height,
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext("2d");

    // set proper canvas dimensions before transform & export
    if (4 < srcOrientation && srcOrientation < 9) {
      canvas.width = height;
      canvas.height = width;
    } else {
      canvas.width = width;
      canvas.height = height;
    }

    // transform context before drawing image
    switch (srcOrientation) {
      case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
      case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
      case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
      case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
      case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
      case 7: ctx.transform(0, -1, -1, 0, height, width); break;
      case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
      default: break;
    }

    // draw image
    ctx.drawImage(img, 0, 0);

    // export base64
    callback(canvas.toDataURL());
  };

  img.src = srcBase64;
};

Wenn

width = img.width;
height = img.height;
var ctx = canvas.getContext('2d');

Mit diesen Transformationen können Sie das Bild dann auf Ausrichtung 1 drehen

Aus der Orientierung:

1. ctx.transform(1, 0, 0, 1, 0, 0);
2. ctx.transform(-1, 0, 0, 1, width, 0);
3. ctx.transform(-1, 0, 0, -1, width, height);
4. ctx.transform(1, 0, 0, -1, 0, height);
5. ctx.transform(0, 1, 1, 0, 0, 0);
6. ctx.transform(0, 1, -1, 0, height, 0);
7. ctx.transform(0, -1, -1, 0, height, width);
8. ctx.transform(0, -1, 1, 0, 0, width);

Vor dem Zeichnen des Bildes auf ctx

ok zusätzlich zu @ user3096626 Antwort Ich denke, es ist hilfreicher, wenn jemand ein Codebeispiel zur Verfügung stellt. Das folgende Beispiel zeigt Ihnen, wie die Bildorientierung von der URL (Remote-Bilder) korrigiert wird:

Lösung 1: Verwenden von Javascript (empfohlen)

1. da Last-Bild Bibliothek EXIF - Tags aus url Bildern nur (Datei- / Blob) nicht extrahiert, werden wir beide verwenden Exif-js und Last-Bild Javascript - Bibliotheken, so zuerst diese Bibliotheken als folgen zu Ihrer Seite hinzufügen:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.1.0/exif.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image-scale.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image-orientation.min.js"></script>

   Beachten Sie, dass die Version 2.2 von exif-js Probleme zu haben scheint, also haben wir 2.1 verwendet

2. dann werden wir im Grunde genommen tun

   a - Laden Sie das Bild mit window.loadImage()

   b - Exif-Tags mit lesen window.EXIF.getData()

   c - Konvertieren Sie das Bild in Leinwand und korrigieren Sie die Bildausrichtung mit window.loadImage.scale()

   d - Platzieren Sie die Leinwand im Dokument

Bitte schön :)

window.loadImage("/your-image.jpg", function (img) {
  if (img.type === "error") {
    console.log("couldn't load image:", img);
  } else {
    window.EXIF.getData(img, function () {
        var orientation = EXIF.getTag(this, "Orientation");
        var canvas = window.loadImage.scale(img, {orientation: orientation || 0, canvas: true});
        document.getElementById("container").appendChild(canvas); 
        // or using jquery $("#container").append(canvas);

    });
  }
});

Natürlich können Sie das Bild auch als base64 vom Canvas-Objekt abrufen und in das Attribut img src einfügen, sodass Sie dies mit jQuery tun können;)

$("#my-image").attr("src",canvas.toDataURL());

Hier ist der vollständige Code unter: github: https://github.com/digital-flowers/loadimage-exif-example

Lösung 2: Verwenden von HTML (Browser-Hack)

Es gibt einen sehr schnellen und einfachen Hack. Die meisten Browser zeigen das Bild in der richtigen Ausrichtung an, wenn das Bild in einem neuen Tab direkt ohne HTML geöffnet wird (LOL, ich weiß nicht warum). Sie können Ihr Bild also grundsätzlich mit iframe anzeigen indem Sie das iframe src-Attribut direkt als Bild-URL einfügen:

<iframe src="/my-image.jpg"></iframe>

Lösung 3: Verwenden von CSS (nur Firefox & Safari auf iOS)

Es gibt ein CSS3-Attribut zum Korrigieren der Bildausrichtung, aber das Problem, dass es nur auf Firefox und Safari / iOS funktioniert, ist immer noch erwähnenswert, da es bald für alle Browser verfügbar sein wird (Browser-Support-Informationen von caniuse ).

img {
   image-orientation: from-image;
}

Für diejenigen, die eine Datei von einem Eingabesteuerelement haben, nicht wissen, wie sie ausgerichtet ist, etwas faul sind und keine große Bibliothek hinzufügen möchten, ist der von @WunderBart bereitgestellte Code mit der Antwort verschmolzen, auf die er verweist ( https://stackoverflow.com/a/32490603 ), der die Ausrichtung findet.

function getDataUrl(file, callback2) {
        var callback = function (srcOrientation) {
            var reader2 = new FileReader();
            reader2.onload = function (e) {
                var srcBase64 = e.target.result;
                var img = new Image();

                img.onload = function () {
                    var width = img.width,
                        height = img.height,
                        canvas = document.createElement('canvas'),
                        ctx = canvas.getContext("2d");

                    // set proper canvas dimensions before transform & export
                    if (4 < srcOrientation && srcOrientation < 9) {
                        canvas.width = height;
                        canvas.height = width;
                    } else {
                        canvas.width = width;
                        canvas.height = height;
                    }

                    // transform context before drawing image
                    switch (srcOrientation) {
                        case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
                        case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
                        case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
                        case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
                        case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
                        case 7: ctx.transform(0, -1, -1, 0, height, width); break;
                        case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
                        default: break;
                    }

                    // draw image
                    ctx.drawImage(img, 0, 0);

                    // export base64
                    callback2(canvas.toDataURL());
                };

                img.src = srcBase64;
            }

            reader2.readAsDataURL(file);
        }

        var reader = new FileReader();
        reader.onload = function (e) {

            var view = new DataView(e.target.result);
            if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
            var length = view.byteLength, offset = 2;
            while (offset < length) {
                var marker = view.getUint16(offset, false);
                offset += 2;
                if (marker == 0xFFE1) {
                    if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);
                    var little = view.getUint16(offset += 6, false) == 0x4949;
                    offset += view.getUint32(offset + 4, little);
                    var tags = view.getUint16(offset, little);
                    offset += 2;
                    for (var i = 0; i < tags; i++)
                        if (view.getUint16(offset + (i * 12), little) == 0x0112)
                            return callback(view.getUint16(offset + (i * 12) + 8, little));
                }
                else if ((marker & 0xFF00) != 0xFF00) break;
                else offset += view.getUint16(offset, false);
            }
            return callback(-1);
        };
        reader.readAsArrayBuffer(file);
    }

was leicht so genannt werden kann

getDataUrl(input.files[0], function (imgBase64) {
      vm.user.BioPhoto = imgBase64;
});

WunderBarts Antwort war die beste für mich. Beachten Sie, dass Sie es erheblich beschleunigen können, wenn Ihre Bilder häufig richtig herum sind, indem Sie einfach zuerst die Ausrichtung testen und den Rest des Codes umgehen, wenn keine Drehung erforderlich ist.

Alle Informationen von wunderbart zusammenstellen, so etwas;

var handleTakePhoto = function () {
    let fileInput: HTMLInputElement = <HTMLInputElement>document.getElementById('photoInput');
    fileInput.addEventListener('change', (e: any) => handleInputUpdated(fileInput, e.target.files));
    fileInput.click();
}

var handleInputUpdated = function (fileInput: HTMLInputElement, fileList) {
    let file = null;

    if (fileList.length > 0 && fileList[0].type.match(/^image\//)) {
        isLoading(true);
        file = fileList[0];
        getOrientation(file, function (orientation) {
            if (orientation == 1) {
                imageBinary(URL.createObjectURL(file));
                isLoading(false);
            }
            else 
            {
                resetOrientation(URL.createObjectURL(file), orientation, function (resetBase64Image) {
                    imageBinary(resetBase64Image);
                    isLoading(false);
                });
            }
        });
    }

    fileInput.removeEventListener('change');
}


// from http://stackoverflow.com/a/32490603
export function getOrientation(file, callback) {
    var reader = new FileReader();

    reader.onload = function (event: any) {
        var view = new DataView(event.target.result);

        if (view.getUint16(0, false) != 0xFFD8) return callback(-2);

        var length = view.byteLength,
            offset = 2;

        while (offset < length) {
            var marker = view.getUint16(offset, false);
            offset += 2;

            if (marker == 0xFFE1) {
                if (view.getUint32(offset += 2, false) != 0x45786966) {
                    return callback(-1);
                }
                var little = view.getUint16(offset += 6, false) == 0x4949;
                offset += view.getUint32(offset + 4, little);
                var tags = view.getUint16(offset, little);
                offset += 2;

                for (var i = 0; i < tags; i++)
                    if (view.getUint16(offset + (i * 12), little) == 0x0112)
                        return callback(view.getUint16(offset + (i * 12) + 8, little));
            }
            else if ((marker & 0xFF00) != 0xFF00) break;
            else offset += view.getUint16(offset, false);
        }
        return callback(-1);
    };

    reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
};

export function resetOrientation(srcBase64, srcOrientation, callback) {
    var img = new Image();

    img.onload = function () {
        var width = img.width,
            height = img.height,
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext("2d");

        // set proper canvas dimensions before transform & export
        if (4 < srcOrientation && srcOrientation < 9) {
            canvas.width = height;
            canvas.height = width;
        } else {
            canvas.width = width;
            canvas.height = height;
        }

        // transform context before drawing image
        switch (srcOrientation) {
            case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
            case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
            case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
            case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
            case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
            case 7: ctx.transform(0, -1, -1, 0, height, width); break;
            case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
            default: break;
        }

        // draw image
        ctx.drawImage(img, 0, 0);

        // export base64
        callback(canvas.toDataURL());
    };

    img.src = srcBase64;
}

Ein Liner jemand?

Ich habe niemanden gesehen, der die browser-image-compressionBibliothek erwähnt hat . Es hat eine Helferfunktion, die perfekt dafür ist.

Verwendung: const orientation = await imageCompression.getExifOrientation(file)

Solch ein nützliches Werkzeug auch auf viele andere Arten.

Ich habe eine Klasse erstellt, die in ein ES6-Modul eingebunden ist, das genau dieses Problem löst.

Es besteht aus 103 Zeilen, keine Abhängigkeiten und ist recht gut strukturiert und dokumentiert. Es soll einfach zu ändern / wiederzuverwenden sein.

Behandelt alle 8 möglichen Ausrichtungen und basiert auf Versprechen.

Ich hoffe, das hilft noch jemandem: https://gist.github.com/vdavid/3f9b66b60f52204317a4cc0e77097913

Ich benutze gemischte Lösung (PHP + CSS).

Container werden benötigt für:

• div.imgCont2 Behälter zum Drehen benötigt;
• div.imgCont1Container zum Zoomen benötigt - width:150%;
• div.imgCont Container, der für Bildlaufleisten benötigt wird, wenn das Bild zoomOut ist.

.

<?php
    $image_url = 'your image url.jpg';
    $exif = @exif_read_data($image_url,0,true);
    $orientation = @$exif['IFD0']['Orientation'];
?>

<style>
.imgCont{
    width:100%;
    overflow:auto;
}
.imgCont2[data-orientation="8"]{
    transform:rotate(270deg);
    margin:15% 0;
}
.imgCont2[data-orientation="6"]{
    transform:rotate(90deg);
    margin:15% 0;
}
.imgCont2[data-orientation="3"]{
    transform:rotate(180deg);
}
img{
    width:100%;
}
</style>

<div class="imgCont">
  <div class="imgCont1">
    <div class="imgCont2" data-orientation="<?php echo($orientation) ?>">
      <img src="<?php echo($image_url) ?>">
    </div>
  </div>
</div>

Zusätzlich zu der Antwort von @fareed namrouti

Dies sollte verwendet werden, wenn das Bild von einem Dateieingabeelement aus durchsucht werden muss

<input type="file" name="file" id="file-input"><br/>
image after transform: <br/>
<div id="container"></div>

<script>
    document.getElementById('file-input').onchange = function (e) {
        var image = e.target.files[0];
        window.loadImage(image, function (img) {
            if (img.type === "error") {
                console.log("couldn't load image:", img);
            } else {
                window.EXIF.getData(image, function () {
                    console.log("load image done!");
                    var orientation = window.EXIF.getTag(this, "Orientation");
                    var canvas = window.loadImage.scale(img,
                        {orientation: orientation || 0, canvas: true, maxWidth: 200});
                    document.getElementById("container").appendChild(canvas);
                    // or using jquery $("#container").append(canvas);
                });
            }
        });
    };
</script>

Ich habe ein kleines PHP-Skript geschrieben, das das Bild dreht. Stellen Sie sicher, dass Sie das Bild speichern, um es bei jeder Anforderung neu zu berechnen.

<?php

header("Content-type: image/jpeg");
$img = 'IMG URL';

$exif = @exif_read_data($img,0,true);
$orientation = @$exif['IFD0']['Orientation'];
if($orientation == 7 || $orientation == 8) {
    $degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
    $degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
    $degrees = 180;
} else {
    $degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);

?>

Prost