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

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

  • предлагаем <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 тоже?

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

7
exif image javascript jquery

5 ответов

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

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

-6

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

Вы можете написать свой собственный парсер EXIF или использовать библиотека jsjpegmeta(Ben Leslie), который представляет собой простую+удивительную библиотеку, которая позволяет браузеру извлекать данные EXIF из большинства файлов jpeg. Есть патч это говорит о том, что он устраняет большинство проблем совместимости. Я не тестировал патч, но быть готов раскошелиться на проект и надеть шляпу github.

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

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

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

вот скрипка

7

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>
1

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

0

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

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

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

-3