Tomio
@Tomio
backend developer (python, php)

Эффект перевернутого изображения: почему переворачивается картинка на сайте?

Доброго времени суток!

Сегодня наблюдал такую странность: при заливке картинки на сайт, при выводе в браузере она "падала на бок". То есть, вертикальная картинка, 240x320px, на сайте выводится перевернутой на 90 градусов по вертикали. Если же открыть ее так: правой кнопкой мышки, "Открыть изображение", то она снова открывается как нормальная.
Что было проверено:
- CSS стили. Отсутствуют какие-либо.
- JS. Отключали. Эффект тот же.
- PHP. Тоже нет скриптов по обработке изображений.

Я пошел дальше. Решил открыть ее в SublimeText - она открывается перевернутой joxi.ru/E5mdGJ9txMRWr1

Потом я загрузил ее непосредственно на Joxi - joxi.ru/LQ2KjNZfz78Nmj - попробуйте перейти по ссылке, затем правой кнопкой по картинке и "Открыть изображение". Вы удивитесь =)

Отсюда вопрос: что это вообще за чудеса такие с картинкой? Как такое могло получиться? =)

P.S. Если же картинку открыть в редакторе и пересохранить ее - она открывается нормально, не переворачивается.
  • Вопрос задан
  • 24137 просмотров
Решения вопроса 3
@max0ua
Дело 100% в EXIF. Сегодня какраз столкнулся с аналогом фотография повернута на 90 градусов, в EXIF стоит Orientation 90 СW.

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

Сравните к примеру:
filarmonia23.com/1.php
<html>
	<head>
		<title>EXIF ORIENTATION TEST</title>
	</head>
	<body>
		<img src="/image.jpg" />
	</body>
</html>

и само фото filarmonia23.com/image.jpg (кстати в ИЕ 9 показывает нормально т.е. ему плевать на EXIF)

Для проекта мы рассматривали 2 варианта решения:
Первый вариант - при загрузке фото удалять все данные 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();


Ну а дальше можно уже и пользователю позволить поворачивать фото и т.д. и т.п.

php.net/manual/ru/book.imagick.php
Ответ написан
alexey-m-ukolov
@alexey-m-ukolov Куратор тега Веб-разработка
В свойствах файла ширина и высота перепутаны местами (ширина 320px, высота 240px, хотя сама картинка портретная). Очевидно, разные программы по разному обрабатывают этот глюк.
Например, стандартный Image Viewer на Ubuntu автоматически её разворачивает, хотя в свойствах файла значения некорректные:
062ba977969649a0ae616d34c77dc2ba.png
Ответ написан
thelongrunsmoke
@thelongrunsmoke
Программист
Дело в EXIF, там указана ориентация камеры. Большинство просмотрщиков читает EXIF и поворачивает картинку. Запомните, перед размещением картинки в интернете удаляйте все метаданные, они никому не нужны.
Исключение, серьезные фотостоки.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы