CSS-ориентация изображения: исходное изображение

из спецификаций https://www.w3.org/TR/css4-images/#the-image-orientation

6.2. Ориентация изображения на странице: свойство «ориентация изображения»

ориентация изображения: от изображения

from-image: если изображение имеет ориентацию, указанную в его метаданных, таких как EXIF, это значение вычисляется до угла, указанного в метаданных, необходимого для правильной ориентации изображения. При необходимости этот угол затем округляется и нормализуется, как описано выше для значения. Если в его метаданных не указана ориентация, это значение вычисляется как «0deg».

Соответствующая проблема Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=158753

Но поддержки браузера пока нет: https://developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility

Поворот через JS

Для этого есть фрагмент JS: https://gist.github.com/runeb/c11f864cd7ead969a5f0

Мой вывод

Я думаю, что вращение изображения на сервере с помощью таких инструментов, как imagemagick, слишком накладно.

Браузер может повернуть изображение, но веб-приложение должно явным образом дать совет, как повернуть это.

Это явное вращение браузера можно сделать следующим образом:

Начиная с Chrome 81, ориентация EXIF ​​изображения соблюдается по умолчанию. Последний Safari (13.1 на данный момент) также работает правильно.

Firefox не полностью реализовал это (см. Bugzilla issue #1616169).

Вот пара тестовых страниц, которые я нашел:

• https://image-orientation-test.now.sh
• https://softov.org/oria/image-orientation

Что касается стандарта, свойство image-orientation теперь помечено как устаревшее в последней версии Черновик спецификации изображений CSS уровня 3:

'image-orientation'
Это свойство устарело и является необязательным для реализации.

Начиная с последнего обновления хрома/хрома версии 81, он будет поддерживать ориентацию exif из самого изображения. Это означает, что ориентация exif, присутствующая в изображении, будет использоваться для ориентации изображения, если не присутствует свойство CSS «image-orientation: none».

До этого обновления вы могли использовать любой другой обходной путь для поворота изображений или поворота вручную на основе известной ориентации изображения. Тогда новый хром 81 автоматически повернет изображение. Если вам нужно избежать автоматического поворота и продолжить работу с тем же обходным путем, что и для старых версий Chrome, вам может потребоваться установить image-orientation: none, так как теперь значение image-orientation равно from-image по умолчанию.

поддержка ориентации изображения в Chrome 81

Я написал небольшой php-скрипт, который вращает изображение. Обязательно сохраните изображение, чтобы просто пересчитывать его при каждом запросе.

<?php

header("Content-type: image/jpeg");
$img = 'IMG URL';

$exif = @exif_read_data($img,0,true);
$orientation = @$exif['IFD0']['Orientation'];
if($orientation == 7 || $orientation == 8) {
    $degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
    $degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
    $degrees = 180;
} else {
    $degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);

?>

Ваше здоровье

Как было сказано в предыдущем плакате, вам нужно будет повернуть само изображение. Но помимо этого вы также можете установить/сбросить тег поворота в EXIF. Таким образом, вы избежите того, что зрители, которые уважают тег ориентации, снова повернут его. Инструмент, который может редактировать EXIF ​​за вас, называется ExifTool и является бесплатным.

Инструмент exifautotran можно использовать заранее, чтобы быстро заменить ориентацию EXIF ​​на ориентацию по умолчанию (1, для «верхнего левого») и автоматически повернуть изображение, чтобы оно выглядело так же, как до преобразования. Затем вы можете использовать файлы JPG, полученные таким образом, на веб-странице, не беспокоясь об этом:

a@b:~/a/b/100_PANA$ exifautotran *.JPG
Executing: jpegtran -copy all -rotate 90 P1000638.JPG
Executing: jpegtran -copy all -rotate 270 P1000641.JPG
Executing: jpegtran -copy all -rotate 90 P1000642.JPG
Executing: jpegtran -copy all -rotate 90 P1000645.JPG
…

Используйте https://github.com/blueimp/JavaScript-Load-Image.

Он включает демонстрационный файл index.html, который может загружать изображение и правильно отображать его с применением правильного поворота.