我可以使用js在客户端读取图片的Exif数据吗? [英] Can I read Exif data of a picture in the client-side with js?

问题描述

我有一个小大"问题.
我使用敏捷上传器上传多张图片，该组件调整了所有图片的大小(效果很好)，但是这样做会丢失exif数据.
我可以使用JS在客户端读取exif数据吗?鉴于该域名不是同一个域名.

I have a little "big" problem.
I use agile-uploader to upload multiple image, this component resize all the picture (it works very well) but by doing this I lose exif data.
Can I read exif data in the client-side using JS ? given that isn't the same name domain.

推荐答案

是.有一个新的库 exifr ，您可以使用它来完成此工作.它是维护，积极开发的，注重性能的库，可在nodejs和浏览器中使用.

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.

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

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

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

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.

这篇关于我可以使用js在客户端读取图片的Exif数据吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！