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

Question

Я делаю селектор фотографий для мобильного веб-приложения, над которым я работаю, и кажется, что изображения «случайно» повернуты. Например, когда я выбираю фотосъемку с камерой телефона, а ориентация телефона - альбомная, изображение отображается по 90 градусов по какой-либо причине. Но когда я делаю фотографию и меняю ориентацию телефона на портрет, изображение правильно отображается.
Если я выберу существующее изображение, некоторые из них будут правильно отображены, а некоторые из них не будут.

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

Мне интересно, есть ли разумный способ решить эту проблему. Я просто не хочу, чтобы изображения были повернуты вообще.

Here's a code snippet to test. Пока я тестирую только на iOS 6.

Answer 1

Оказывается, проблема в том, чтобы установить изображение в контейнер в качестве фонового изображения и использование нового свойства CSS3 background-size: cover для пропорционального заполнения всей видимой области. По какой-то причине мобильный браузер иногда не знает, как сделать правильное 2D-преобразование и заканчивает поворот изображения, установленного в качестве фона.

Обходным путем было вместо этого добавить тег <img>, который теперь прекрасно работает как на настольном, так и на мобильном браузере.

Ps .: Только проверено на мобильных устройствах Chrome и Safari, iOS6 и iOS7.

Answer 2

Изображения iPhone сохраняются одинаково независимо от ориентации. Если вы сделаете снимок в альбомной ориентации с помощью кнопки «домой» справа, фотография всегда правильная. Вам нужно прочитать данные EXIF, чтобы определить, как его повернуть.

Вот вопрос, связанный с чтением данных EXIF: Accessing JPEG EXIF rotation data in JavaScript on the client side

Это похоже на этот вопрос: Camera image changes orientation