Comment extraire les 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

Les données EXIF ​​intégrées dans les images JPEG contiennent des informations précieuses, y compris la rotation d'origine de la photo. Pour améliorer l'expérience utilisateur, les développeurs ont souvent besoin d'accéder à ces données EXIF ​​​​pour les ajustements automatiques de rotation. Cet article présente une solution JavaScript pour récupérer les données de rotation JPEG EXIF ​​côté client.

Comment récupérer les données de rotation JPEG EXIF

Pour accéder aux données JPEG EXIF ​​en JavaScript, vous pouvez suivre les étapes suivantes :

1. Lire le fichier JPEG : Utilisez l'API FileReader pour lire le fichier JPEG en tant que ArrayBuffer.
2. Analyser les données EXIF : Examinez l'ArrayBuffer pour le début des données EXIF, qui est généralement identifié par une valeur d'en-tête de 0xFFE1.
3. Recherchez la balise d'orientation : Dans les données EXIF , recherchez la balise Orientation (ID de balise : 0x0112). Cette balise contient la valeur de rotation sous forme de code numérique.

Exemple de code

Voici un exemple d'extrait de code qui implémente les étapes décrites ci-dessus :

<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>

Cet extrait de code peut être intégré à votre application Web pour récupérer et traiter les données de rotation JPEG EXIF, vous permettant de faire pivoter les photos en fonction de leur orientation d'origine côté client.

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!