Wie extrahiere ich JPEG-EXIF-Rotationsdaten in JavaScript auf der Clientseite?

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

Die in JPEG-Bildern eingebetteten EXIF-Daten enthalten wertvolle Informationen, einschließlich der ursprünglichen Rotation des Fotos. Um das Benutzererlebnis zu verbessern, benötigen Entwickler häufig Zugriff auf diese EXIF-Daten für automatische Rotationsanpassungen. In diesem Artikel wird eine JavaScript-Lösung zum Abrufen von JPEG-EXIF-Rotationsdaten auf der Clientseite vorgestellt.

So rufen Sie JPEG-EXIF-Rotationsdaten ab

Um auf JPEG-EXIF-Daten in JavaScript zuzugreifen, Sie können die folgenden Schritte ausführen:

1. JPEG-Datei lesen: Verwenden Sie die FileReader-API, um die JPEG-Datei als ArrayBuffer zu lesen.
2. Parsen die EXIF-Daten: Untersuchen Sie den ArrayBuffer auf den Anfang der EXIF-Daten, der normalerweise durch einen Header-Wert von 0xFFE1 identifiziert wird.
3. Suchen Sie das Orientierungs-Tag:In den EXIF-Daten , suchen Sie nach dem Orientierungs-Tag (Tag-ID: 0x0112). Dieses Tag enthält den Rotationswert als numerischen Code.

Beispielcode

Hier ist ein Beispielcode-Snippet, das die oben beschriebenen Schritte implementiert:

<code class="javascript">function getOrientation(file, callback) {
  // Read the JPEG file
  const reader = new FileReader();
  reader.onload = function(e) {
    const arrayBuffer = e.target.result;

    // Parse the EXIF data
    const view = new DataView(arrayBuffer);
    if (view.getUint16(0, false) != 0xFFD8) {
      return callback(-2); // Not a JPEG file
    }
    let offset = 2;
    while (offset < arrayBuffer.byteLength) {
      if (view.getUint16(offset + 2, false) <= 8) return callback(-1); // Invalid JPEG file
      const marker = view.getUint16(offset, false);
      offset += 2;
      if (marker == 0xFFE1) {
        if (view.getUint32(offset += 2, false) != 0x45786966) {
          return callback(-1); // Not an EXIF header
        }

        // Find the orientation tag
        const little = view.getUint16(offset += 6, false) == 0x4949;
        offset += view.getUint32(offset + 4, little);
        const tags = view.getUint16(offset, little);
        offset += 2;
        for (let i = 0; i < tags; i++) {
          if (view.getUint16(offset + (i * 12), little) == 0x0112) {
            return callback(view.getUint16(offset + (i * 12) + 8, little)); // Found the orientation tag
          }
        }
      } else if ((marker &amp; 0xFF00) != 0xFF00) {
        break; // Not a valid JPEG marker
      } else {
        offset += view.getUint16(offset, false); // Skip the rest of the segment
      }
    }

    return callback(-1); // Orientation tag not found
  };
  reader.readAsArrayBuffer(file);
}

// Usage:
const input = document.getElementById('input');
input.onchange = function(e) {
  getOrientation(input.files[0], function(orientation) {
    alert('Orientation: ' + orientation);
  });
};</code>

Dieses Code-Snippet kann in Ihre Webanwendung integriert werden, um JPEG-EXIF-Rotationsdaten abzurufen und zu verarbeiten, sodass Sie Fotos basierend auf ihrer ursprünglichen Ausrichtung auf der Clientseite drehen können.

Das obige ist der detaillierte Inhalt vonWie extrahiere ich JPEG-EXIF-Rotationsdaten in JavaScript auf der Clientseite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!