开发者

Can I read Exif data of a picture in the client-side with js?

开发者 https://www.devze.com 2023-02-09 19:32 出处:网络
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.

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 clie开发者_JAVA百科nt-side using JS ? given that isn't the same name domain.


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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号