Загрузка изображений в браузере поворачивается, если существует ориентация Exif

Содержание

Вопрос или проблема
Ответ или решение
Проблема с ориентацией изображений при загрузке в браузере
Как работает Exif Orientation?
Решение проблемы
Заключение

Вопрос или проблема

Я загружаю изображения с помощью следующего простого компонента:

export function FileUploader({ file, setFile }) {

  // Обработчик выбора файла
  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];

    if (selectedFile) {
      setFile(selectedFile);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />

      {file && (
        <div>
          <p><strong>Выбранный файл:</strong> {file.name}</p>
          <p><strong>Тип файла:</strong> {file.type}</p>
          <p><strong>Размер файла:</strong> {(file.size / 1024).toFixed(2)} КБ</p>
        </div>
      )}
    </div>
  );
}

Если загруженное изображение содержит exif ориентацию, отличную от 1 (не повёрнуто), данные изображения, которые загружаются, поворачиваются, но настройка exif ориентации сохраняется. Это приводит к тому, что изображение поворачивается снова браузером при его отображении.

Например, если ориентация равна 3 (горизонтальное отражение), изображение, полученное на серверной стороне, будет отражено браузером, но exif всё равно будет указывать на необходимость отразить его снова.

Если я вручную удалю exif ориентацию из изображения после его загрузки, изображение будет отображаться правильно.

Есть ли какой-то способ предотвратить браузер (Chrome и Safari ведут себя одинаково) от поворота изображения?

Чтобы исправить проблему, связанную с повторным поворотом изображения браузером, вы можете использовать CSS, чтобы предотвратить чтение браузером данных о ориентации EXIF.

Вы можете использовать:

style={{ imageOrientation: ‘none’ }}

добавьте это к тегу изображения при отображении изображения как

<img src={URL.createObjectURL(file)} style={{ imageOrientation: ‘none’ }} alt=”Изображение с сервера” />

Это должно решить вашу проблему с повторным поворотом изображения браузером.

Ответ или решение

Проблема с ориентацией изображений при загрузке в браузере

При загрузке изображений через веб-приложение, часто возникает проблема с ориентацией изображений, если они содержат метаданные Exif. Это может быть особенно актуально для изображений, сделанных на мобильные устройства, где ориентация может отличаться от стандартной. Если в Exif существует атрибут ориентации, отличающийся от 1 (что означает отсутствие поворота), браузер может отобразить изображение неправильно.

Как работает Exif Orientation?

Метаданные Exif (Exchangeable Image File Format) содержат важную информацию об изображениях, включая информацию о ориентации. Кодировка ориентации может принимать разные значения:

1: нормальная ориентация.
3: поворот на 180 градусов.
6: поворот на 90 градусов по часовой стрелке.
8: поворот на 90 градусов против часовой стрелки.

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

Решение проблемы

Существует несколько подходов для устранения проблемы с поворотом изображения:

Удаление метаданных Exif:
Если вы вручную удалите информацию о ориентации из Exif после загрузки изображения, изображение будет отображаться правильно. Это можно сделать с помощью сторонних библиотек, таких как exif-js, или с помощью серверного кода, который обрабатывает изображения.
Использование CSS стилей:
Наиболее простое и быстрое решение — это использование CSS стилей для управления отображением изображений. Вы можете добавить стиль imageOrientation: 'none' к тегу <img> при отображении загруженных изображений:
```
<img src={URL.createObjectURL(file)} style={{ imageOrientation: 'none' }} alt="Image from backend" />
```
Это указывает браузеру игнорировать информацию о ориентации, содержащуюся в Exif, и отображать изображение таким, каким оно есть на самом деле, без дополнительных поворотов.

Заключение

Проблема с неправильным отображением изображений из-за Exif Orientation является достаточно распространенной, но ее можно легко решить. Понимание работы Exif и применение простых решений, таких как удаление метаданных или использование CSS, может значительно улучшить пользовательский опыт в вашем веб-приложении. Если вам необходимо дополнительное решение, рассмотрите возможность обработки изображений на сервере с помощью специализированных библиотек.