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

Question

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.

Answer 1

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.