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

pdkcd3nj  于 2023-05-05  发布在  Java
关注(0)|答案(4)|浏览(183)

我试图从一个图像(jpeg)中提取EXIF数据,该图像已被拖到浏览器中或已通过html文件输入元素选择。
我设法在浏览器中使用FileReader and FileReader.readAsDataURL预览图像,如here所述。
我发现了一个EXIF library,它允许通过javascript提取图像的EXIF数据。但对我来说,只有当我使用它与正常的img标签,加载他们的内容通过一个URL。
我还在StackOverflow上找到了this question,其中接受的答案表明这是不可能的。
但我很确定它可以实现,因为500px.com在添加文件以供上传之后和上传完成之前立即提取EXIF数据。
一些想法应该如何提取EXIF数据从base64编码的图像我从FileReader?

wj8zmpe1

wj8zmpe11#

我终于找到了解决这个问题的客户端解决方案:
1.使用FileReader.readAsBinaryString方法读取文件
1.然后将该二进制字符串 Package 到一个BinaryFile对象中,该对象已经包含在EXIF Library
1.最后调用EXIF.readFromBinaryFile(binaryFileObject);
它完成了:)

kr98yfug

kr98yfug2#

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

xxslljrj3#

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

xesrikrc

xesrikrc4#

当您通过文件输入获取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);

相关问题