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:
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 & 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!