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

Question

У меня есть следующая задача:

• Предложение <input type=file />
• Когда пользователь добавляет файл:
  • читать данные EXIF ​​(в частности, информацию о местоположении, если имеется)
  • отправить файл и информацию из EXIF ​​во внешний API, используя Ajax

Итак, я хотел бы использовать JavaScript для извлечения некоторых данных EXIF ​​при добавлении файла в input.

Возможно ли это?

Я знаю об этом вопросе: Могу ли я прочитать данные Exif изображения на стороне клиента с помощью js? , что относится к http://blog.nihilogic.dk/2008/05/reading-exif-data-with-javascript.html

Но мой вопрос (я думаю?) Немного другой - я хочу извлечь данные EXIF, прежде чем изображение будет даже в моем домене, в то время как оно находится в локальной файловой системе пользователя, если вы понимаете, что я имею в виду. Я могу получить доступ к двоичным данным, поэтому я тоже могу получить EXIF?

Спасибо за ваш совет.

Answer 1

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

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

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

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

Мне пришлось немного настроить библиотеку, чтобы заставить ее делать то, что я хотел (я хотел общую библиотеку JS). Я также сделал настройку, определенную в выпуске 1.

Вот скрипка

Answer 2

Ответ Шанималя верен, но он не перестает удивлять меня тем, как люди слишком усложняются. Вот реализация библиотеки 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>

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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