Фотографии некоторых объектов повёрнуты в браузере Safari

[evgenykatyshev]

Пользователи сообщили, что фотографии некоторых объектов повёрнуты при просмотре в Safari на Mac. Пока единичный пример, на скрине:

[batyrmastyr]

Похоже, проблема в изображении: оно снято повёрнутым, но в EXIF прописано как его нужно повернуть — <meta><item name="Orientation">6</item>.
Проблема должна быть во многих браузерах:

• IE/Edge < 81
• Хром < 81 (вышел в апреле этого года)
• Сафари для MacOS X < 13 версии, вышел в марте этого года
  Проблемы нет в мобильном Сафари и Firefox - там фотки поворачиваются с 2010 и 2013 года соответственно.

Тут два варианта:

1. скачивать фотки яваскриптом и поворачивать вручную. По советам со StackOverflow:
   1.1. Взять blueimp/JavaScript-Load-Image. 25 Кб в самом сжатом виде, но можно вырезать кучу ненужных функций (масштабирование, вырезание части изображения и т.д.).
   1.2. Использовать canvas.DrawImage и использовать более простое определение ориентации: 1, 2 и 3. Кто-то печалился, что с отзывчивостью у холста дела хуже, чем у тега img, возможно речь шла про замыливание на экранах с высоким разрешением.
   1.3. пункт 1.2 только ориентацию брать из api.
   1.4. грязный хак <iframe src="/my-image.jpg"></iframe> из этого ответа.
   1.5. пункты 1.2 - 1.4 применять только если браузер не поворачивает картинку сам. Код взять там.
2. прогонять фотки через свой сервер и переворачивать / обрезать их там. По идее самый правильный в перспективе вариант: можно будет не так сильно зависеть от надёжности чужих api.

[avdeev]

@batyrmastyr Да, думаю, надо попробовать второй вариант. Можно в сторону вот этих проектов посмотреть.
https://github.com/imgproxy/imgproxy
https://github.com/willnorris/imageproxy

[Julia-Lavrova]

https://heritagemap.ru/lat/56.317176/lon/43.988198/5200615000