Wie extrahiere ich EXIF-Ausrichtungsdaten mit JavaScript aus einer JPEG-Datei?

Zugriff auf JPEG-EXIF-Rotationsdaten auf der Clientseite mit JavaScript

Die Möglichkeit, Fotos basierend auf ihrer ursprünglichen Ausrichtung zu drehen, wie sie von der Kamera aufgenommen und im JPEG-EXIF gespeichert wurde Daten sind für die ordnungsgemäße Darstellung von wesentlicher Bedeutung. Dies kann vollständig auf der Clientseite mithilfe von JavaScript und dem erreicht werden. Element.

So extrahieren Sie EXIF-Ausrichtungsdaten in JavaScript

Um auf EXIF-Ausrichtungsdaten zuzugreifen, kann JavaScript Methoden verwenden, die das Lesen lokaler Datei-API-Objekte und lokaler Bilder ermöglichen () oder Remote-Bilder (). Eine solche Methode ist das FileReader-Objekt, das das Lesen von Dateien als Arrays ermöglicht.

Hier ist eine spezielle Funktion, die FileReader nutzt, um das Orientierungs-Tag aus einer JPEG-Datei zu extrahieren:

<code class="javascript">function getOrientation(file, callback) {
  var reader = new FileReader();
  reader.onload = function(e) {
    var view = new DataView(e.target.result);

    // Check for "SOI" ("Start of Image") marker
    if (view.getUint16(0, false) != 0xFFD8) return callback(-2);

    // Calculate offset to APP1 marker
    var length = view.byteLength, offset = 2;
    while (offset < length) {
      if (view.getUint16(offset+2, false) <= 8) return callback(-1);
      var marker = view.getUint16(offset, false);
      offset += 2;

      // Check for APP1 marker
      if (marker == 0xFFE1) {
        // Check for "Exif" signature
        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;

        // Search for Orientation tag
        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 &amp; 0xFF00) != 0xFF00) {
        break;
      }
      else {
        offset += view.getUint16(offset, false);
      }
    }
    return callback(-1);
  };

  reader.readAsArrayBuffer(file);
}

Beispielverwendung

Um die bereitgestellte Funktion zu verwenden, können Sie das Eingabeereignis eines Dateieingabeelements verwenden:

<code class="javascript">var input = document.getElementById('input');
input.onchange = function(e) {
  getOrientation(input.files[0], function(orientation) {
    alert('orientation: ' + orientation);
  });
}

HTML

<code class="html"><input id='input' type='file' /></code>

Das obige ist der detaillierte Inhalt vonWie extrahiere ich EXIF-Ausrichtungsdaten mit JavaScript aus einer JPEG-Datei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!