クライアント側のJavaScriptでJPEG EXIF回転データを抽出するにはどうすればよいですか?

クライアント側の JavaScript で JPEG EXIF 回転データにアクセスする

JPEG 画像に埋め込まれた EXIF データには、元の回転などの貴重な情報が保持されます。写真の。ユーザー エクスペリエンスを向上させるために、開発者は多くの場合、自動回転調整のためにこの EXIF データにアクセスする必要があります。この記事では、クライアント側で JPEG EXIF 回転データを取得する JavaScript ソリューションを紹介します。

JPEG EXIF 回転データを取得する方法

JavaScript で JPEG EXIF データにアクセスするには、次の手順を使用できます:

1. JPEG ファイルを読み取ります: FileReader API を使用して JPEG ファイルを ArrayBuffer として読み取ります。
2. Parse EXIF データ: ArrayBuffer で EXIF データの先頭を調べます。これは通常、ヘッダー値 0xFFE1 によって識別されます。
3. 方向タグを見つけます: EXIF データ内、Orientation タグ (タグ ID: 0x0112) を探します。このタグには、回転値が数値コードとして含まれています。

サンプル コード

上記の手順を実装するコード スニペットの例を次に示します。

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

このコード スニペットを Web アプリケーションに統合して JPEG EXIF 回転データを取得および処理することで、クライアント側で元の向きに基づいて写真を回転できるようになります。

以上がクライアント側のJavaScriptでJPEG EXIF回転データを抽出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。