Ориентация холста отображается неправильно

Question

Я получаю некоторые изображения, отображающие вбок, которые необходимо повернуть из-за метаданных EXIF. Я использовал image-direction: from-image, чтобы исправить теги img. Что эквивалентно тегу canvas.

Answer 1

CSS image-orientation не поддерживается должным образом, и в документации MDN говорится, что это скорее всего устарело. Если вы знаете, что все изображения уже повернуты (в одном направлении), вы можете:

a.) Открыть изображения в редакторе изображений, например GIMP, и сохранить поверх них (GIMP перезапишет данные ротации, сначала вы получите предупреждение).

b.) Используйте свойство CSS transform:

CSS

.my-images-selector {

  /* 90deg or 270deg depending on the rotation */
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

Если вы рисуя изображение на весь холст, вы можете просто применить CSS выше к элементу холста.

c.) Для рисования повернутых изображений на холсте используйте метод контекста холста transform ( Вы можете обратиться сюда: HTML5 Поворот холста изображения )

Также см. JS Ориентация Exif на стороне клиента: поворот и зеркальное отражение изображений JPEG