HTML/Javascript Доступ к данным EXIF ​​перед загрузкой файлов

Я пытаюсь извлечь данные EXIF ​​ из изображения (jpeg), которое было перетащено в браузер или было выбрано через элемент ввода файла html.

Мне удалось просмотреть изображение в браузере, используя FileReader and FileReader.readAsDataURL как описано здесь.

и я нашел библиотеку EXIF ​​, которая позволяет извлекать EXIF-данные изображения через javascript. Но для меня это работает, только если я использую его с обычными тегами img, которые загружают их содержимое по URL-адресу.

Я также нашел этот вопрос в StackOverflow, где принятый ответ утверждает, что это просто невозможно.

Но я уверен, что это можно реализовать, потому что 500px.com извлекает данные EXIF ​​сразу после добавления файла для загрузки и прежде чем загрузка будет завершена.

Некоторые идеи о том, как можно извлечь данные EXIF ​​из кодированного изображения base64, которое я получаю из FileReader?

Ответы

Ответ 1

Наконец-то я нашел решение на стороне клиента для проблемы:

  • Прочитайте файл с помощью FileReader и метода .readAsBinaryString
  • Затем сверните эту двоичную строку в объект BinaryFile, который уже включен в EXIF ​​Library
  • Наконец вызовите EXIF.readFromBinaryFile(binaryFileObject);

и его выполнение:)

Ответ 2

jQuery-fileExif Библиотека javascript считывает изображения exif-данных перед загрузкой.
ссылка GitHub, пример jsfiddle из библиотеки.

var someCallback = function(exifObject) {

    $('#cameraModel').val(exifObject.Model);
    $('#lat').val(exifObject.GPSLatitude);
    $('#lng').val(exifObject.GPSLongitude);
    // Uncomment the line below to examine the
    // EXIF object in console to read other values
    //console.log(exifObject);

  }

      try {
        $('#file').change(function() {
            $(this).fileExif(someCallback);
        });
      }
      catch (e) {
        alert(e);
      }

Ответ 3

Посмотрите на код FxIF firefox extension. Он читает exif-данные, используя только JavaScript. Чтобы прочитать содержимое файла, вы можете использовать FileReader API современных браузеров.