Как получить оригинальную ориентацию картинки, доступную по URL?
Задача состоит в том, чтобы правильно отображать картинку (горизонтально или вертикально) в зависимости от ее EXIF-данных.
Сейчас сервер возвращает url картинки формата JPEG, но когда этот url используется как src картинки (тег img), то ориентация у такой картинки на сайте всегда будет горизонтальной, даже если фото было сделано вертикально с телефона. Если же перейти по url картинки, то в браузере она отобразится в правильной ориентации. Подозреваю, что тег img не умеет распознавать ориентацию картинки. Есть css-свойство image-orientation, но оно поддерживается только firefox, а нужна также поддержка chrome и IE
Планирую на сервере скачивать картинку и доставать оттуда метаданные EXIF для определения ориентации. Но это может быть лишней нагрузкой на сервер. Кто сталкивался с такой проблемой? Как решали проблему? Какие есть идеи?
Было бы замечательно увидеть кусок реализации, если ориентация определялась на стороне сервера
Ответы (1 шт):
Подозреваю, что тег img не умеет распознавать ориентацию картинки.
Подозреваю, что ТЕГИ в принципе не умеют ничего. Распознает браузер, но делает это в зависимости от вашего контента. При просмотре чисто рисунка - реагирует на ориентацию, а при использовании его как части HTML-страницы - смотрит исключительно на размеры.
Ищите/пишите полифиллы для нужных вам браузеров.
Обычно картинки поворачиваются специальными либами сразу при закачивании на сервер, и уже там хранятся повернутыми. Тогда же генерятся маленькие превьюшки.
Вот решение для дергания ориентации на клиенте: https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side