如何在客戶端的 JavaScript 中提取 JPEG EXIF 旋轉資料？

在客戶端的JavaScript 中存取JPEG EXIF 旋轉資料

嵌入在JPEG 影像中的EXIF 資料包含有價值的信息，包括原始旋轉照片的。為了增強使用者體驗，開發人員通常需要存取此 EXIF 資料以進行自動旋轉調整。本文介紹了一個在客戶端檢索 JPEG EXIF 旋轉資料的 JavaScript 解決方案。

如何擷取JPEG EXIF 旋轉資料

要在JavaScript 中存取JPEG EXIF 數據，您可以採取以下步驟：

1. 讀取JPEG 檔案： 使用FileReader API 將JPEG 檔案當作ArrayBuffer 讀取。
2. 解析EXIF 資料： 檢查 ArrayBuffer 中 EXIF 資料的開頭，通常由標頭值 0xFFE1 識別。
3. 找出方向標籤： 在 EXIF 資料中，找出方向標籤（標籤 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中文網其他相關文章！