JavaScript: могу ли я прочитать данные EXIF ​​из ввода для загрузки файла?

Нет, извините. Вы не можете получить доступ к каким-либо данным файла, пока они не будут загружены на сервер, что, безусловно, делает библиотека, с которой вы связались. После загрузки файла вы можете где-нибудь сохранить его, повторно загрузить и прочитать из него данные EXIF.

Приведенный выше ответ был правильным, но большинство современных браузеров теперь разрешают доступ к файлам через apis js-файла. Не стесняйтесь использовать это, но вы также должны использовать серверное решение, если требуется кроссбраузерная поддержка.

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

Вы можете написать свой собственный синтаксический анализатор exif или использовать библиотеку jsjpegmeta (Бен Лесли), которая является простая + потрясающая библиотека, которая позволяет браузеру извлекать данные EXIF ​​из большинства файлов jpeg. Существует патч, в котором говорится, что он устраняет большинство проблем совместимости. . Я не тестировал патч, но будьте готовы разветвить проект и надеть шляпу на github.

Чтобы получить EXIF:

1. Диалоговое окно открытия файла: я обычно создаю кнопку, которая вызывает функцию для генерации входных данных <file и добавления обработчика изменений.
2. Получить файлы: в обработчике изменения файлов ue $(this).get(0).files, чтобы получить список выбранных файлов.
3. Анализируйте данные exif: отправляйте результаты просмотра в jsjpegmeta.

Мне пришлось немного подправить библиотеку, чтобы заставить ее делать то, что я хотел (мне нужна была библиотека commonJS). Я также сделал настройку, указанную в проблеме 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 из multile файлов:

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

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

Да, в современном браузере вы можете читать содержимое файлов и извлекать exif. ссылка, которую вы показываете, является примером. проблема в том, что в старых браузерах IE6-9, FF 3.6- это невозможно. Также вы должны учитывать, что браузеру сложно читать и извлекать exif из больших файлов.

Ответ Шанимала верен, но меня не перестает удивлять, насколько излишне сложные люди создают вещи. Вот реализация библиотеки jsjpegmeta, которая выполняет то же самое, если вам не нужна поддержка загрузка нескольких файлов:

<input type="file" accept="image/jpeg" id="input" />
<script src="./jsjpegmeta.js"></script>
<script>
document.getElementById('input').onchange = function(e) {
  var file = e.target.files[0],
    fr = new FileReader();
  fr.onloadend = function() {
    console.log(new JpegMeta.JpegFile(this.result, file.name));
  };
  fr.readAsBinaryString(file);
};
</script>

Люблю оптимизм. Мне нравится тот шум, который он издает, когда он полностью раздавлен.

Нет, JavaScript не может напрямую попасть в EXIF; это не проблема безопасности, это просто то, что браузер не делает доступным для DOM.

Самое близкое, что вы получите, - это именно взлом, о котором говорилось в другом вопросе: иметь процесс на стороне сервера для анализа изображения и возврата данных EXIF ​​через AJAX>.