首页 > web前端 > js教程 > 如何使用 JavaScript 从 JPEG 文件中提取 EXIF 方向数据?

如何使用 JavaScript 从 JPEG 文件中提取 EXIF 方向数据?

Linda Hamilton
发布: 2024-11-02 11:34:02
原创
937 人浏览过

How to Extract EXIF Orientation Data from a JPEG File Using JavaScript?

使用 JavaScript 在客户端访问 JPEG EXIF 旋转数据

能够根据相机捕获并存储在 JPEG EXIF 中的原始方向旋转照片数据对于确保正确显示至关重要。这可以完全在客户端使用 JavaScript 和 来实现。

如何在 JavaScript 中提取 EXIF 方向数据

要访问 EXIF 方向数据,JavaScript 可以利用能够读取本地文件 API 对象、本地图像的方法(如何使用 JavaScript 从 JPEG 文件中提取 EXIF 方向数据?) 或远程图像 (如何使用 JavaScript 从 JPEG 文件中提取 EXIF 方向数据?)。其中一种方法是 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板