如何在客户端的 JavaScript 中提取 JPEG EXIF 旋转数据？-js教程-PHP中文网

如何在客户端的 JavaScript 中提取 JPEG EXIF 旋转数据？

Patricia Arquette

发布： 2024-10-30 06:41:03

原创

838 人浏览过

How to Extract JPEG EXIF Rotation Data in JavaScript on the Client Side?

在客户端的 JavaScript 中访问 JPEG EXIF 旋转数据

嵌入在 JPEG 图像中的 EXIF 数据包含有价值的信息，包括原始旋转照片的。为了增强用户体验，开发人员通常需要访问此 EXIF 数据以进行自动旋转调整。本文介绍了一个在客户端检索 JPEG EXIF 旋转数据的 JavaScript 解决方案。

如何检索 JPEG EXIF 旋转数据

要在 JavaScript 中访问 JPEG EXIF 数据，您可以采用以下步骤：

读取 JPEG 文件： 使用 FileReader API 将 JPEG 文件作为 ArrayBuffer 读取。
解析EXIF 数据： 检查 ArrayBuffer 中 EXIF 数据的开头，该数据通常由标头值 0xFFE1 标识。
查找方向标签： 在 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中文网其他相关文章！