Как заставить показывать ориентацию изображения? - PullRequest
2 голосов
/ 27 марта 2020

Я использую узел Multer и express для загрузки изображения в мое приложение. Но некоторые изображения показывают поворот на 90 градусов, когда он на клиенте.

Почему это происходит? Как я могу это исправить?

Кстати, я использую vue на клиенте и для процесса загрузки, конечно, я использую формданные

ОБНОВЛЕНИЕ

После исследований и комментариев парней выше, это проблема EXIF. Любые идеи кода для решения этой проблемы?

Ответы [ 3 ]

2 голосов
/ 01 апреля 2020

Скорее всего, это вызвано Exif метаданными (как и @Romulo предложил).

Браузеры игнорируют Exif метаданные при отображении изображений, и именно поэтому вы получаете такое поведение.

Чтобы убедиться, что это связано с Exif, сделайте 4 снимка с разной ориентацией телефона (пейзаж влево, пейзаж вправо, портрет, вверх ногами). Один из них будет показан правильно, а остальные 3 будут повернуты. (Также обратите внимание, что если вы используете фронтальную камеру, изображение также будет зеркальным).

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

Чтобы правильно отобразить фотографию, изображение необходимо повернуть, но если вы просто измените метаданные Exif, то вы не нужно делать это Конечно, любой клиент, который показывает изображение, должен знать об этой информации (и iOS Фотографии и тому подобное).

Это не имеет ничего общего с multer, но с изображениями сохраняются.

Суть в том, что вам нужно повернуть изображение, чтобы компенсировать это.

Просмотрите этот npm пакет , чтобы настроить изображение на стороне сервера. .

2 голосов
/ 31 марта 2020

Поведение, которое вы испытываете, вероятно, вызвано Exif Метаданными ориентации.

Есть еще один вопрос здесь на Stackoverflow об этой проблеме: JS Клиентский Exif Ориентация: Поворот и зеркальное отображение изображений JPEG

Выбранный ответ указывает на проект под названием Javascript -Load-Image в качестве возможного решения, которое в принципе означает, что вам необходимо учитывать ориентацию при рендеринге изображений, чтобы получить согласованное поведение.

Другой возможной альтернативой может быть редактирование / удаление метаданных ориентации в вашем бэкэнде.

Проверьте следующий ресурс для получения дополнительной информации:

Ориентация изображения JPEG и Exif

0 голосов
/ 06 апреля 2020

Вы можете использовать https://github.com/blueimp/JavaScript-Load-Image. Он использует холст.

Демо: http://blueimp.github.io/JavaScript-Load-Image/

...