Heim >Web-Frontend >js-Tutorial >Wie greife ich clientseitig auf JPEG-EXIF-Rotationsdaten in JavaScript zu?

Wie greife ich clientseitig auf JPEG-EXIF-Rotationsdaten in JavaScript zu?

Susan Sarandon
Susan SarandonOriginal
2024-11-04 07:28:31779Durchsuche

How to Access JPEG EXIF Rotation Data in JavaScript on the Client Side?

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

Problem:

Rotation Fotos basierend auf ihrer ursprünglichen Drehung, wie sie in JPEG-EXIF-Daten aufgezeichnet wird, ist eine Herausforderung bei der Arbeit mit JavaScript und lokalen Bildern im Browser.

Clientseitige Lösung:

Um dieses Problem zu lösen, benötigen wir eine clientseitige Lösung, die es JavaScript ermöglicht, Ausrichtungsinformationen aus JPEG-EXIF-Daten zu extrahieren. Ein Ansatz beinhaltet die Verwendung der FileReader-API und der DataView-Objekte:

<br>function getOrientation(file, callback) {<br> const reader = new FileReader();<br> reader.onload = (e) => {</p>
<pre class="brush:php;toolbar:false">const view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8) return callback(-2);

let length = view.byteLength, offset = 2;
while (offset < length) {
  if (view.getUint16(offset+2, false) <= 8) return callback(-1);
  const marker = view.getUint16(offset, false);
  offset += 2;
  if (marker == 0xFFE1) {
    if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);

    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));
      }
    }
  } else if ((marker &amp; 0xFF00) != 0xFF00) break;
  else offset += view.getUint16(offset, false);
}
return callback(-1);

};
reader.readAsArrayBuffer(file);
}

Dieses Codefragment veranschaulicht eine clientseitige Lösung, die Extrahiert das Orientierungs-Tag aus JPEG-EXIF-Daten. Durch die Verwendung von FileReader und DataView werden die gewünschten Informationen schnell und effektiv abgerufen.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn