Maison > interface Web > js tutoriel > le corps du texte

Comment extraire les données de rotation JPEG EXIF ​​en JavaScript côté client ?

Patricia Arquette
Libérer: 2024-10-30 06:41:03
original
754 Les gens l'ont consulté

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

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!