JavaScript：我可以从文件上传输入读取 EXIF 数据吗？

Question

我有以下任务：

• 提供
• 当用户添加文件时 ：
  • 读取 EXIF 数据（具体来说，位置信息（如果有））
  • 使用 Ajax 将文件和信息从 EXIF 发送到外部 API

因此，我想使用 JavaScript 在文件打开时提取一些 EXIF 数据添加到输入。

这可能吗？

我知道这个问题： 能否在客户端用js读取图片的Exif数据？，参考http://blog.nihilogic.dk/2008/05/reading-exif-data-with-javascript.html

但我的问题是（我认为？ ）略有不同 - 我想在图像位于我的域之前提取 EXIF 数据，而它位于用户的本地文件系统上，如果您明白我的意思的话。我可以访问二进制数据，那么我也可以获得 EXIF 吗？

谢谢你的建议。

Answer 1

您可以使用 HTML5 在客户端上执行此操作。对于不支持 File 和 FileReader 的旧浏览器，您应该有一个适当的基于服务器的后备。

您可以编写自己的 exif 解析器或使用 jsjpegmeta 库(Ben Leslie)，它是一个简单+很棒的库，可以让浏览器从大多数 jpeg 文件中提取 EXIF 数据。有一个补丁表示它修复了大部分兼容性问题。我还没有测试过这个补丁，但是准备好 fork 这个项目并戴上你的 github 帽子。

要获取 EXIF：

1. 打开文件对话框： 我通常创建一个按钮，调用一个函数来生成 输入并添加更改handler
2. 获取文件： 在文件更改处理程序 ue $(this).get(0).files 中获取所选文件的列表。
3. 解析 exif 数据：将浏览结果发送到 jsjpegmeta

我必须对库进行一些调整才能让它执行我想要的操作（我想要一个 commonJS 库）我还进行了问题 1 中确定的调整

这是一个小提琴

更新 26.07.2022
该软件包已移至 Gitlab。该补丁已包含在最新版本中。您可以在此处找到该软件包。

Answer 2

我知道这可能已经解决了，但我想为遇到这个问题的人们提供一个替代解决方案。

有一个新的库 exifr 您可以使用它来做到这一点。它是一个维护、积极开发的库，重点关注性能，并且可以在 Nodejs 和浏览器中运行。

从一个文件中提取 exif 的简单示例：

document.querySelector('#filepicker').addEventListener('change', async e => {
  let file = e.target.files[0]
  let exifData = await exif.parse(file)
  console.log('exifData', exifData)
})

从多个文件中提取 exif 的复杂示例：

document.querySelector('#filepicker').addEventListener('change', async e => {
    let files = Array.from(e.target.files)
    let promises = files.map(exif.parse)
    let exifs = await Promise.all(promises)
    let dates = exifs.map(exif => exif.DateTimeOriginal.toGMTString())
    console.log(`${files.length} photos taken on:`, dates)
})

您甚至可以提取嵌入在文件中的缩略图：

let img = document.querySelector("#thumb")
document.querySelector('input[type="file"]').addEventListener('change', async e => {
  let file = e.target.files[0]
  img.src = await exifr.thumbnailUrl(file)
})

您还可以尝试该库的 游乐场 并尝试图像及其输出，或者查看 存储库和文档。

Answer 3

2023 年来到这里，因为寻找类似的解决方案。所有答案中提到的库似乎都已经过时了。但是，npm 上有一个维护的库： https://www.npmjs.com/package/exifreader

为了在客户端读取 exif，我们可以这样使用它：

在 html 中包含 lib

读取图像文件并提取exif

// example code adapted from exifreader docs
document.querySelector('input[type="file"]').addEventListener('change', async e => {
    const file = e.target.files[0];
    const tags = await ExifReader.load(file);
    // example exif tag access
    const imageDate = tags['DateTimeOriginal'].description;
    const unprocessedTagValue = tags['DateTimeOriginal'].value;
    // ...more processing here
})

Answer 4

我刚刚从 npm 找到了“exif-js”。

https://github.com/exif-js/exif-js

我是在反应中这样做。
这是我的代码。
它对我来说非常有效，

import EXIF from 'exif-js';

//......

const fileChangedHandler = (event) => {
    const files = event.target.files;
    console.log(files[0]);
    EXIF.getData(files[0], function () {
        console.log(EXIF.getAllTags(this));
    });
};


//......

<input
    type="file"
    onChange={fileChangedHandler}
/>    

结果应该是这样的。

Answer 5

是的，使用现代浏览器，您可以读取文件内容并提取 exif。您显示的链接是一个示例。问题是，在旧浏览器 IE6-9、FF 3.6 上，这是不可能的。您还应该考虑浏览器从大文件中读取和提取 exif 是一个困难的过程。

Answer 6

Shanimal 的答案是正确的，但它使事情变得过于复杂。这是 jsjpegmeta 库的实现，它可以完成相同的事情，如果您不需要支持多个文件上传：

<input type="file" accept="image/jpeg" id="input" />
<script src="./jsjpegmeta.js"></script>
<script>
document.getElementById('input').onchange = function(e) {
  var file = e.target.files[0],
    fr = new FileReader();
  fr.onloadend = function() {
    console.log(new JpegMeta.JpegFile(this.result, file.name));
  };
  fr.readAsBinaryString(file);
};
</script>

Answer 7

不，JavaScript 无法直接获取 EXIF；这不是一个安全问题，它只是浏览器无法向 DOM 提供的内容。

您得到的最接近的正是另一个问题提到的 hack：在服务器端有一个进程来分析图像并通过 AJAX 返回 EXIF 数据>。