Могу ли я прочитать данные Exif изображения на стороне клиента с помощью js?

Question

У меня маленькая "большая" проблема.
Я использую Agile-Uploader для загрузки нескольких изображений, этот компонент изменяет размер всей картинки (работает очень хорошо), но при этом я теряю exif-данные.
Могу ли я читать данные exif на стороне клиента с помощью JS? учитывая, что это не одно и то же имя домена.

Answer 1

Да. Есть новая библиотека 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)
})

Вы также можете опробовать игровую площадку библиотеки и поэкспериментировать с изображениями и их выводом или заглянуть в репозиторий и документацию.