JavaScript を使用して JPEG ファイルから EXIF 方向データを抽出する方法

JavaScript を使用したクライアント側の JPEG EXIF 回転データへのアクセス

カメラでキャプチャされ、JPEG EXIF に保存された元の方向に基づいて写真を回転する機能データは適切な表示を確保するために不可欠です。これは、JavaScript と を使用してクライアント側で完全に実現できます。 element.

JavaScript で EXIF 方向データを抽出する方法

EXIF 方向データにアクセスするために、JavaScript はローカル ファイル API オブジェクト、ローカル イメージの読み取りを可能にするメソッドを利用できます。 ()、またはリモート画像 ()。このようなメソッドの 1 つは、ファイルを配列として読み取ることができる FileReader オブジェクトです。

ここでは、FileReader を利用して 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);
}

使用例

提供関数を使用するには、ファイル入力のinputイベントを利用できます。要素:

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

以上がJavaScript を使用して JPEG ファイルから EXIF 方向データを抽出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。