Comment accéder aux données de rotation JPEG EXIF ​​en JavaScript côté client ?

Accès aux données de rotation JPEG EXIF ​​en JavaScript côté client

Problème :

Rotation les photos basées sur leur rotation d'origine, telle qu'enregistrée dans les données JPEG EXIF, constituent un défi lorsque l'on travaille avec JavaScript et des images locales dans le navigateur.

Solution côté client :

Pour résoudre ce problème, nous avons besoin d'une solution côté client qui permette à JavaScript d'extraire les informations d'orientation des données JPEG EXIF. Une approche consiste à utiliser l'API FileReader et les objets DataView :

<br>function getOrientation(file, callback) {<br> const reader = new FileReader();<br> reader.onload = (e) => {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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);

Copier après la connexion

};
reader.readAsArrayBuffer(file);
}

Cet extrait de code illustre une solution côté client qui extrait la balise d'orientation des données JPEG EXIF. En utilisant FileReader et DataView, il récupère rapidement et efficacement les informations souhaitées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!