如何使用 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中文网其他相关文章！