Comment extraire les données d'orientation EXIF ​​d'un fichier JPEG à l'aide de JavaScript ?

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

La possibilité de faire pivoter les photos en fonction de leur orientation d'origine, telle que capturée par l'appareil photo et stockée dans JPEG EXIF données, est essentiel pour garantir un affichage correct. Ceci peut être réalisé entièrement côté client en utilisant JavaScript et l'outil element.

Comment extraire les données d'orientation EXIF ​​en JavaScript

Pour accéder aux données d'orientation EXIF, JavaScript peut utiliser des méthodes qui permettent la lecture d'objets API de fichiers locaux, d'images locales () ou des images distantes (). L'une de ces méthodes est l'objet FileReader, qui permet la lecture de fichiers sous forme de tableaux.

Voici une fonction spécifique qui exploite FileReader pour extraire la balise d'orientation d'un fichier JPEG :

<code class="javascript">function getOrientation(file, callback) {
  var reader = new FileReader();
  reader.onload = function(e) {
    var view = new DataView(e.target.result);

    // Check for "SOI" ("Start of Image") marker
    if (view.getUint16(0, false) != 0xFFD8) return callback(-2);

    // Calculate offset to APP1 marker
    var length = view.byteLength, offset = 2;
    while (offset < length) {
      if (view.getUint16(offset+2, false) <= 8) return callback(-1);
      var marker = view.getUint16(offset, false);
      offset += 2;

      // Check for APP1 marker
      if (marker == 0xFFE1) {
        // Check for "Exif" signature
        if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);

        var little = view.getUint16(offset += 6, false) == 0x4949;
        offset += view.getUint32(offset + 4, little);
        var tags = view.getUint16(offset, little);
        offset += 2;

        // Search for Orientation tag
        for (var 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);
}

Exemple d'utilisation

Pour utiliser la fonction fournie, vous pouvez utiliser l'événement d'entrée d'un élément d'entrée de fichier :

<code class="javascript">var input = document.getElementById('input');
input.onchange = function(e) {
  getOrientation(input.files[0], function(orientation) {
    alert('orientation: ' + orientation);
  });
}

HTML

<code class="html"><input id='input' type='file' /></code>

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!