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

时间:2011-02-11 15:15:26

标签: javascript exif uploader

我有一点“大”的问题 我使用agile-uploader上传多个图像,这个组件调整了所有图片的大小(它运行得很好)但是通过这样做我丢失了exif数据。
我可以使用JS在客户端读取exif数据吗?鉴于这不是同一个域名。

1 个答案:

答案 0 :(得分:0)

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

您还可以尝试使用库中的playground并尝试图像及其输出,或者检查repository and docs