Почему iPhone показывает правильную ориентацию изображений, а рабочий стол - нет?

Question

У меня есть простое веб-приложение, в котором делается фотография, которая преобразуется в строку base64 на стороне клиента, и эта строка отправляется в базу данных, а затем отображается в приложении, извлекая ее из базы данных. Когда я получаю строку base64 из базы данных и отображаю ее в приложении, используя <img src="data:/png ...">, она отображается в правильной ориентации на iPhone, но не на рабочем столе.

У меня сложилось впечатление, что строка base64 не содержит никаких exif-данных об изображении, так как браузер знает, как показать правильную ориентацию в iPhone, но не на рабочем столе?

Кроме того, предположим, что я поворачиваю image, т. е. преобразовать строку base64 в повернутую версию строки base64 на основе данных exif, а затем отправить ее в базу данных, не стал бы я испортить ориентацию на iPhone затем?

Как исправить эту загадку?

Answer 1

Проблема в том, что фотография поворачивается и имеет встроенные метаданные с информацией о повороте. Некоторые приложения могут читать метаданные и поворачивать фотографию. Принимая во внимание, что простое добавление фотографии как <img> не делает этого.

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

exifr быстро при этом и может обрабатывать сотни фотографий без сбоя браузера или много времени :). Кроме того, есть простой и понятный API, и вы можете добавить в него практически все - элемент, URL, буфер, ArrayBuffer, даже base64 url ​​или string и т. Д.

exifr.orientation(file).then(val => {
  console.log('orientation:', val)
})

Это дает целое число от 1 до 8 (выучить подробнее о этих значениях здесь ) и просто примените transform:rotate к изображению. Или вы можете перерисовать его, используя canvas (что немного сложнее)