Ориентация камеры - HTML5

Question

Я создаю мобильное веб-приложение (только HTML5 / JavaScript / CSS), которое позволяет пользователю делать снимки.Затем изображение с камеры загружается в элемент HTML canvas.Пользователь может поворачивать свой телефон при съемке фотографии, поэтому в конечном итоге я хочу повернуть вывод соответствующим образом.Есть ли способ на веб-странице только для определения степени поворота пользователя при съемке?Я не просто говорю о том, находятся ли они в ландшафтном режиме.Я имею в виду, если вы держите телефон прямо в портретном режиме, положите его на рабочий стол (теперь он параллелен вашему рабочему столу), а затем поверните в горизонтальное положение.Это не вызовет изменения ориентации, но теперь вы будете держать телефон в горизонтальном положении, если это имеет смысл.Это будет обычный способ, которым пользователи будут делать фотографии.Я хочу иметь возможность правильно повернуть изображение при загрузке.

Спасибо

Answer 1

Есть ли способ на веб-странице только определить, какой угол поворота пользователя при съемке?

Да, есть!Когда фотографии сделаны, они содержат метаданные - информацию об изображении.Это называется EXIF ​​ data.

Он сообщает вам такие вещи, как модель камеры, выключилась ли вспышка и - полезно для вас - ориентация камеры.

Если вы используете JavaScript для рисования изображения на холсте, я могу порекомендовать JavaScript-библиотеку загрузки изображений BlueImp

После загрузки изображения вы сможете выполнитьпозвоните, как:

var orientation = data.exif.get('Orientation');

Это скажет вам, как камера удерживалась, когда была сделана фотография.В зависимости от телефона вы также можете получить данные о повороте, данные GPS, направление по компасу и т. Д.