PHP после загрузки изображения из каталога — неправильная ориентация

Question

PHP после загрузки изображения из каталога — неправильная ориентация

На самом деле я использую простой фрагмент PHP, чтобы перебрать каталог, чтобы захватить изображения и вставить их в HTML-разметку.

Теперь я сталкиваюсь с проблемой, что все изображения ориентированы в альбомной ориентации. Так и портретные изображения ориентированы как ландшафтные изображения.

Вот мой фрагмент:

    <?php
$projectpath = 'Projects';
$projects = glob($projectpath . '/*' , GLOB_ONLYDIR);
foreach($projects as $key=>$value): ?>
<section class="project">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="project-images">
<?php
$handle = opendir(dirname(realpath(__FILE__)).'/'.$value);
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
echo '<img class="img-responsive" alt="'. $file .'" src="'. $value .'/'. $file .'"/>';
}
}
?>
</div>
</div>
</div>
</div>
</section>
<?php endforeach; ?>

Так чего мне здесь не хватает? Какие-либо предложения?

0

file image landscape-portrait orientation php

Решение

Другие решения

Вот простой пример PHP, чтобы проверить, является ли изображение портретным или альбомным:

<?php

$imagePath = 'images/imagename.png';
$imageSize = getimagesize($imagePath); //returns an array
$imageWidth = $imageSize[0]; // array key 0 is width
$imageHeight = $imageSize[1]; // array key 1 is height

if($imageWidth < $imageHeight){
echo '<img class="ROTATE">'//add the rotate class
} elseif($imageWidth > $imageHeight){
echo '<img>'//do not add the rotate class
} else {
echo '<img>'//do not add the rotate class
?>

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

1

Источник

Accepted Answer

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

Я предполагаю, что вы обычно смотрите на изображения с помощью некоторого средства просмотра на вашем ПК, которое автоматически поворачивает изображения на основе некоторого флага ориентации, хранящегося в метаданных изображений. Но такой флаг делает не изменить реальную, техническую ориентацию (или лучшее разрешение). Вместо этого такой флаг является лишь подсказкой для визуализации изображений. Ваш проект не использует этот флаг, поэтому ваши изображения появиться быть повернутым, в то время как в действительности это не так.

Таким образом, решение является одним из двух вариантов:

поверните изображения перед их использованием внутри своего проекта, чтобы их реальная техническая ориентация была правильной, и изображения нужно было отображать только без какого-либо дополнительного поворота.
используйте js или php или что-то еще, чтобы обнаружить этот флаг ориентации и оценить его. В зависимости от результата вы можете установить некоторый класс CSS, который приводит к вращению на основе CSS тех изображений, которые необходимо повернуть для визуализации.

1