当前位置：文江博客话题详情

可以用js在客户端读取图片的Exif数据吗？

发布于 2024-10-16 18:06:54 字数 124 浏览 5 评论 0原文

我有一个小“大”问题。
我使用agile-uploader上传多个图像，这个组件调整了所有图片的大小（它工作得很好），但是这样做我丢失了exif数据。
我可以使用JS在客户端读取exif数据吗？鉴于这不是同一个名称域。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏九 2024-10-23 18:06:54

是的。有一个新的库 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)
})

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

Yes. There's a new library exifr with which you can do exactly that. It's maintained, actively developed library with focus on performance and works in both nodejs and browser.

Simple example of extracting exif from one file:

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

Complex example of extracting exif from multile files:

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

And you can even extract thumbnail thats embedded in the file:

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

You can also try out the library's playground and experiment with images and their output, or check out the repository and docs.

回复收藏 0 原文

~没有更多了~