Захваченное фото автоматически поворачивается во время загрузки в IOS 6.0 или iPhone

У меня есть один элемент управления файлами HTML, используя это. Я пытаюсь загрузить файл на сервер.

Нажмите на управление файлами
Он автоматически откроет диалог выбора файла/камеры.
Я выбираю Camera
Я снял фотографию и сохранил
Теперь отправьте форму
Фото захвата успешно сохраняется на сервере, но оно повернуто 90 степень.

Эта проблема связана только с iPhone или IOS.

<input id="image" name="image" type="file" accept="image/*" capture style="width: 58px" />

Пожалуйста, дайте мне знать, как остановить автоматическое вращение изображения, если оно снято с камеры.

Спасибо, Imdadhusen

Ответ 1

Это может иметь какое-то отношение к метатегам EXIF /TIFF в изображениях.

Один из этих тегов указывает ориентацию изображения. Некоторые фотографии, которые вы загружаете на сервер (например, с iPhone), могут иметь эти теги, а другие (из другого источника/рабочего процесса) могут отсутствовать. Сервер может сохранять или не сохранять эти теги и может читать или не читать теги, чтобы попытаться правильно ориентировать изображение. Аналогичным образом веб-браузер может или не может обратить внимание на эти теги. Если вы загружаете изображения, содержащие теги, результаты, безусловно, будут непредсказуемыми.

Хороший способ узнать, является ли это проблемой, - это загрузить изображение "проблемы" и "хорошее" изображение с сервера и сравнить их. Откройте их в режиме предварительного просмотра и проверьте вторую вкладку инспектора. Там будет отображаться всякая метаинформация. Посмотрите, есть ли у одного изображения информация о ориентации, а другая нет. Если не отображать мета-информацию, то, скорее всего, сервер полностью отключает и не использует его, и вы можете забыть об этом ответе.

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

Например, фотография моего iPhone, снятая в портретном режиме, имеет следующие метатеги:

Высота пикселя: 2,448
Ширина пикселя: 3,264
Ориентация: 6 (поворот на 90 ° CCW)

Нативная растровая ориентация - это пейзаж.
Метатаг "ориентация" указывает, что программное обеспечение для чтения изображений поворачивается к портрету для отображения.

Метатаг используется (некоторым) программным обеспечением для изображения, чтобы "правильно" поворачивать изображение на портрет, но игнорируется другим программным обеспечением, которое отображает изображение как ландшафт.

Ситуация сбивает с толку, и для этого нет установленного стандарта (теги - всего лишь подсказка), поэтому при подготовке изображений к онлайн-публикации самым безопасным является удаление этих тегов и физическое вращение изображения до правильной BITMAP перед загрузкой. Если вы пишете серверную часть приложения, вы можете сделать это на сервере. Но очень важно доставлять изображения в веб-браузер в правильной ориентации BITMAP без метаданных ориентации.

Почему это? Потому что даже сегодня разные браузеры используют разные подходы к метатагам.

Изображение iPhone, которое я только что упомянул, выглядит следующим образом:
Google Chrome 24 портрет
Сафари 6 портрет
Firefox 17 пейзаж
Opera 12 пейзаж

Не великое положение дел!