HTML/Javascript 在文件上传之前访问 EXIF 数据

HTML/Javascript Access EXIF data before file upload

本文关键字：访问 EXIF 数据 Javascript 文件 HTML      更新时间：2023-09-26

我正在尝试从已拖入浏览器或通过html文件输入元素选择的图像（jpeg）中提取EXIF数据。

我设法使用FileReader and FileReader.readAsDataURL在浏览器中预览图像如此处所述。

我找到了一个EXIF库，它允许通过javascript提取图像的EXIF数据。但对我来说，它只有在我将其与通过 URL 加载其内容的普通img标签一起使用时才有效。

我还在StackOverflow上发现了这个问题，其中接受的答案指出这是不可能的。

但是我很确定可以实现它，因为 500px.com 在添加文件进行上传后和上传完成之前立即提取EXIF数据。

一些想法如何从我从FileReader获得的base64编码图像中提取EXIF数据？

我终于找到了该问题的客户端解决方案：

  1. 使用FileReader和方法读取文件 .readAsBinaryString
  2. 然后将该二进制字符串包装到已包含在EXIF库中的BinaryFile对象中
  3. 最后打电话EXIF.readFromBinaryFile(binaryFileObject);

及其完成:)

jQuery-fileExif javascript 库在上传之前读取图像 exif 数据。
GitHub 链接，来自库的示例 jsfiddle。

var someCallback = function(exifObject) {
    $('#cameraModel').val(exifObject.Model);
    $('#lat').val(exifObject.GPSLatitude);
    $('#lng').val(exifObject.GPSLongitude);
    // Uncomment the line below to examine the
    // EXIF object in console to read other values
    //console.log(exifObject);
  }
      try {
        $('#file').change(function() {
            $(this).fileExif(someCallback);
        });
      }
      catch (e) {
        alert(e);
      }

看看 FxIF 火狐扩展的代码。它仅使用 JavaScript 读取 exif 数据。要读取文件内容，您可以使用现代浏览器的文件读取器 API。

当您通过文件输入获取 File 类实例时，请执行以下操作：

import exif from 'exif-js';
const fr = new FileReader();
fr.onload = () => {
  const result = exif.readFromBinaryFile(fr.result);
  //    ^ EXIF data will be here
};
fr.readAsArrayBuffer(file);
相关文章：