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

【问题标题】：HTML/Javascript Access EXIF data before file uploadHTML/Javascript 在文件上传前访问 EXIF 数据
【发布时间】：2012-05-07 16:10:01
【问题描述】：

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

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

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

我还在 StackOverflow 上找到了this question，其中接受的答案表明这是不可能的。

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

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

【问题讨论】：

一个更新的解决方案exif-js，基于来自http://www.nihilogic.dk/的相同EXIF_ Library

标签： javascript jquery html file-upload exif

【解决方案1】：

查看FxIF firefox extension 的代码。它仅使用 JavaScript 读取 exif 数据。要读取文件内容，可以使用现代浏览器的FileReader API。

【讨论】：

我真的很想避免浏览器扩展。正如我所提到的，我已经在使用 FileReady，但我不知道如何从从 FileReader 获得的数据中提取 EXIF 数据

【解决方案2】：

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

使用FileReader和.readAsBinaryString方法读取文件
然后将该二进制字符串包装到一个 BinaryFile 对象中，该对象已包含在 EXIF Library 中
最后拨打EXIF.readFromBinaryFile(binaryFileObject);

它完成了:)

【讨论】：

试图在我的项目中包含 binaryajax.js 会导致访问被拒绝错误，所以这不是我的解决方案。
nihilogic.dk 的链接已失效。
BinaryFile 对象和 EXIF 库的链接也失效了。
如果你想使用 exif-js，请在此处查看我的回答：stackoverflow.com/questions/18981555/…——它的作用非常简单。

【解决方案3】：

jQuery-fileExif javascript 库在上传之前读取图像 exif 数据。
GitHub link，例如库中的 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);
      }

【讨论】：

我在 jquery 中被拒绝访问，只是试图将库包含在我的项目中。