如何使用 JavaScript 從 JPEG 檔案中提取 EXIF 方向資料？

使用JavaScript 在客戶端存取JPEG EXIF 旋轉資料

能夠根據相機擷取並儲存在JPEG EXIF 中的原始方向旋轉照片資料對於確保正確顯示至關重要。這可以完全在客戶端使用 JavaScript 和 來實現。

如何在JavaScript 中提取EXIF 方向數據

要存取EXIF 方向數據，JavaScript 可以利用能夠讀取本地檔案API 物件、本地映像的方法() 或遠端影像()。其中一種方法是 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);
}

用法範例

要使用提供的功能，您可以利用檔案輸入元素的輸入事件：

<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中文網其他相關文章！