Получить двоичные данные/EXIF ​​с изображения на странице

Question

Мне нужно получить доступ к EXIF данным в изображениях, уже загруженных на страницу. Скажем, из расширения браузера. AFAIU, есть некоторые подходы к использованию JavaScript для выполнения задачи:

• JavaScript-Load-Image;
• Nihologic EXIF manipulation library;
• нарисовать изображение на холсте.

Первые два подхода могут касаться локальных файлов или требовать выполнения дополнительного (лишнего в этом случае) запроса на сервер для извлечения двоичных данных. Последняя вероятная работа:

var canvas = document.createElement("canvas"); 
canvas.width = oImg.width; 
canvas.height = oImg.height; 

// Copy the image contents to the canvas 
var ctx = canvas.getContext("2d"); 
ctx.drawImage(oImg, 0, 0); 

// Get the data-URL formatted image 
var dataURL = window.atob(canvas.toDataURL("image/jpeg", 1.0).split(',')[1]); 

но результирующий двоичный объект не содержит EXIF ​​данные (0xE1 маркера), кажется, что когда-то нарисовано на холсте, он дает JFIF (0xE0) маркер вместо.

Итак, мой вопрос: Можно ли получить доступ к двоичным данным уже загруженного изображения на странице?

Обратите внимание: есть similar questions уже на SO, но никто не отвечает на вопрос, как не перезагружать изображение и не получить доступ к данным EXIF.

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

Answer 1

Возможно ли получить доступ к двоичным данным уже загруженного изображения на странице?

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

Процесс загрузки изображения - это совершенно отдельный процесс и вообще не содержит холста - холст здесь невиновен!:-)

браузер загружает изображение в примерно следующим образом, что все это происходит внутри, не имея доступа из JavaScript или DOM (не обязательно в этом порядке на всех этапах):

• Подключение к серверу
• Загрузка данных, чтобы определить тип файла
• Если поддерживаемый тип файла, загружает все данные
• Экстракты ICC и гамма-определения, если поддерживается
• Extrac т EXIF ​​ориентация/вращение, если присутствует
• распаковывает/декодирует файл в растровое изображение
• Применяется гамма и ICC коррекции, если доступны и поддерживается
• обновляют Image объектов с внутренней ссылкой на растровые
• вещает load событий
• Запускает onload вызова в любом

Когда вы получаете Image объективистское все готово и установлено - остальная часть файла и извлеченная из него информация отбрасываются, в том числе. EXIF-данные (за исключением ориентации EXIF ​​в браузерах, которые ее поддерживают, однако, только для внутреннего использования, недоступны для чтения из JavaScript и используются только для DOM - хотя, поскольку он может сломать предполагаемый макет, он обычно игнорируется). Я считаю, что большинство браузеров могут читать этот флаг, но AFAIK использует только Safari mobile (я мог ошибаться здесь, но это не меняет сути ответа).

Осталось только растровое изображение с информацией RGBA. Теперь вы можете вставить это в DOM или нарисовать его на холст, но мета-информация уже удалена, прежде чем делать это. Когда вы извлекаете данные-uri из canvas (как png или jpeg, на самом деле не имеет значения), извлечение основано исключительно на растровом изображении холста , а не на его исходном изображении (изображения - всего лишь один источник графики в любом случае, в дополнение к видео и дорожкам).

Поскольку не существует никакого официального API в данный момент доступа к данным EXIF ​​от объекта изображения, то только способ получить EXIF ​​чтения данных, чтобы считывать изображение в виде двоичного потока в двоичный буфер и извлечь данные вручную и низкоуровневые с использованием JavaScript. Вот почему список библиотек должен сделать это таким образом. Кэш может прийти на помощь, хотя.

Возможно, это не то, на что вы надеялись, но у нас нет другого варианта, который это делает, или делает это на стороне сервера (например, время загрузки). Затем вы можете предоставить механизм для загрузки кэшированных данных EXIF ​​в виде объекта JSON или чего-то подобного.