PHP 从目录加载图像后 - 方向错误
PHP after image loaded from directory - wrong orientation
实际上,我正在使用一个简单的 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; ?>
那么我在这里缺少什么?有什么建议吗?
我怀疑这些图像真的有不同的方向。 所有 图像更有可能是横向布局(宽度大于高度),因此从技术角度来看可视化是正确的。
我想您通常会在 PC 上使用某些查看器查看图像,这些查看器会根据存储在图像元数据中的某些方向标志自动旋转图像。但是这样的标志 不会 改变真实的技术方向(或更好的分辨率)。相反,这样的标志只是图像可视化的提示。您的项目不参考该标志,这就是为什么您的图像 看起来 被旋转,而实际上它们不是。
所以解决方案是两个选项之一:
在您的项目中使用图像之前先旋转它们,以便它们的真实技术方向正确,并且只需要在不进行任何额外旋转的情况下显示图像。
使用 js 或 php 或其他任何方法来检测该方向标志并对其进行评估。根据结果,您可以设置一些 css class,这会导致那些需要旋转以进行可视化的图像基于 css 的旋转。
这是一个简单的 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
?>
请记住,这只是一个示例,您必须调整脚本才能正常工作。
实际上,我正在使用一个简单的 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; ?>
那么我在这里缺少什么?有什么建议吗?
我怀疑这些图像真的有不同的方向。 所有 图像更有可能是横向布局(宽度大于高度),因此从技术角度来看可视化是正确的。
我想您通常会在 PC 上使用某些查看器查看图像,这些查看器会根据存储在图像元数据中的某些方向标志自动旋转图像。但是这样的标志 不会 改变真实的技术方向(或更好的分辨率)。相反,这样的标志只是图像可视化的提示。您的项目不参考该标志,这就是为什么您的图像 看起来 被旋转,而实际上它们不是。
所以解决方案是两个选项之一:
在您的项目中使用图像之前先旋转它们,以便它们的真实技术方向正确,并且只需要在不进行任何额外旋转的情况下显示图像。
使用 js 或 php 或其他任何方法来检测该方向标志并对其进行评估。根据结果,您可以设置一些 css class,这会导致那些需要旋转以进行可视化的图像基于 css 的旋转。
这是一个简单的 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
?>
请记住,这只是一个示例,您必须调整脚本才能正常工作。