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

Question

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

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

我找到了EXIF library，它允许通过javascript提取图像的EXIF数据。但对我来说，只有当我使用普通img标记将其内容加载到网址上时，它才有效。

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

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

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

Answer 1

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

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

及其完成：）

Answer 2

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);
      }

Answer 3

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