CSS image-orientation: from-image

Согласно спецификациям W3C:

6.2. Ориентация изображения на странице: свойство ‘image-orientation’

image-orientation: from-image

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

Соответствующая проблема в Chromium: Chrome-Issue.

Однако поддержка браузеров пока отсутствует: Browser compatibility.

Поворот с помощью JS

Есть JS-скрипт, который делает это: gist.

Мой вывод

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

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

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

Чтобы перевести ваш вопрос в стиль ответа на StackOverflow, я бы предложил следующее:

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

<?php

header("Content-type: image/jpeg");
$img = 'URL_вашего_изображения';

// Получаем данные EXIF
$exif = @exif_read_data($img, 0, true);
$orientation = @$exif['IFD0']['Orientation'];

// Определяем угол поворота в зависимости от ориентации
switch ($orientation) {
    case 7:
    case 8:
        $degrees = 90;
        break;
    case 5:
    case 6:
        $degrees = 270;
        break;
    case 3:
    case 4:
        $degrees = 180;
        break;
    default:
        $degrees = 0;
}

// Поворачиваем изображение
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);

// Отправляем изображение в браузер
imagejpeg($rotate);
imagedestroy($rotate);

?>

Пояснения:

1. Используйте switch для более читаемого кода.
2. Обязательно сохраняйте изображение после поворота, чтобы не делать этот процесс повторно при каждом запросе. Вы можете сделать это с помощью imagejpeg($rotate, 'path_to_save_image.jpg');, где укажете путь для сохранения.
3. Убедитесь, что обрабатываете ошибки, например, если изображение не получается загрузить или если данные EXIF отсутствуют.

Надеюсь, это поможет вам улучшить код и оптимизировать процесс работы с изображениями!

Удачи!

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

1. Склонируйте или загрузите репозиторий с GitHub.
2. Откройте файл index.html в вашем браузере.
3. Выберите изображение с помощью элемента <input type="file">, и библиотека автоматически применит корректную ориентацию при отображении.

Если вам нужно интегрировать эту библиотеку в свой проект, добавьте необходимые скрипты и укажите обработчик для загрузки изображений, используя функции, предоставляемые этой библиотекой. В документации вы найдете дополнительные примеры использования и настройки.

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

a@b:~/a/b/100_PANA$ exifautotran *.JPG
Выполняется: jpegtran -copy all -rotate 90 P1000638.JPG
Выполняется: jpegtran -copy all -rotate 270 P1000641.JPG
Выполняется: jpegtran -copy all -rotate 90 P1000642.JPG
Выполняется: jpegtran -copy all -rotate 90 P1000645.JPG
…

Обратите внимание, что использование jpegtran -copy all […] отдельно сохраняет предыдущую ориентацию, что может привести к тому, что изображение будет повёрнуто дважды в некоторых просмотрщиках. exifautotran автоматически устраняет эту проблему.