Неправильная ориентация .JPG в браузере

#html #jpg

Проблема: обнаружено, что картинки в формате .JPG (именно прописными буквами, с обычным
.jpg - всё в порядке) в браузере меняют свою ориентацию.




https://jsfiddle.net/vzLgay5a/1/

То есть одна картинка может быть отражена по вертикали, а другая повёрнута на 90°.
Чем и как в таком случае повернуть её в ту ориентацию, в какой она отображается локально
на машине.

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

Ответы

Ответ 1

Дело в EXIF. 

При просмотре в теле страницы показывает перевернутой, а при "открыть картинку в
новой вкладке" показывает картинку повернутой правильно. Т.е. современные браузеры
когда показывают только картинку берут ее (в моем случае повернутую набок) смотрят
на EXIF и поворачивают как надо.

Первый вариант - при загрузке фото удалять все данные EXIF
Второй вариант - при загрузке фото если есть данные EXIF - повернуть фото согласно
данных.

2 вариант

$img = new Imagick($uploaded_img);
$orientation = $img->getImageOrientation();
switch($orientation) { 
        case imagick::ORIENTATION_BOTTOMRIGHT: 
                $img->rotateimage("#000", 180); // rotate 180 degrees 
        break; 
        case imagick::ORIENTATION_RIGHTTOP: 
                $img->rotateimage("#000", 90); // rotate 90 degrees CW 
        break; 
        case imagick::ORIENTATION_LEFTBOTTOM: 
                $img->rotateimage("#000", -90); // rotate 90 degrees CCW 
        break; 
}
$img->setImageOrientation(imagick::ORIENTATION_TOPLEFT);
$img->writeImage($uploaded_img);
$img->clear();
$img->destroy();


Первый вариант был бы примерно так:

$img = new Imagick($uploaded_img);
$img->stripImage();
$img->writeImage($uploaded_img);
$img->clear();
$img->destroy();


https://toster.ru/q/267428