<img> 不需要的照片旋转
Posted
技术标签:
【中文标题】<img> 不需要的照片旋转【英文标题】:<img> unwanted photo rotation 【发布时间】:2015-04-07 07:07:44 【问题描述】:我在使用 html5 的表格中嵌入了一张图片。图像自动逆时针旋转 90 度,没有应用 CSS,也没有 javascript(曾经有,因此在某些标签上使用了 class
参数,但我在 @987654327 中注释掉了 <style></style>
块@。
该图像是由带有 Imagick 的 php 脚本创建的,用于将其从原始图像缩小,但原始图像仍然存在同样的问题。
代码:
<table>
<tr>
<th>$username has sent you a photo!</th>
</tr>
<tr>
<td>
<img src="IMG_1314_MOD.jpg" class="rotate90"/>
</td>
</tr>
<tr>
<td><div class="caption">$caption</div></td>
</tr>
</table>
我尝试使用this answer中的CSS代码并将其应用于<img>
,但是当它旋转时,它并没有调整表格,并且覆盖了文本。
有人知道我可以使用的解决方案吗?
--编辑--
我使用带有 PHP 的 EXIF 扩展来print_r()
图像上的 EXIF 标头,并且似乎没有任何方向标头。如果您不介意仔细检查,可以在 Pastebin here 上找到这些标题,任何人都可以阅读此内容。
【问题讨论】:
可能您的图像在 (EXIF) 元数据中包含方向信息,因此专用的图像查看器应用程序会自动旋转它,而简单的 Web 浏览器则不会。在这种情况下,您在浏览器中看到的将是图像的非旋转 版本,只有其他一些软件会显示它旋转给您。跨度> @CBroe 有没有办法从元数据中删除该信息? @CBroe 我使用 PHP 在修改后的图像的 EXIF 标头上做了一个print_r()
,似乎没有任何方向数据。我在问题中添加了一些信息
“而且似乎没有任何方向数据” – 那么[Orientation] => 6
是什么?正如您所看到的here,6
的值意味着相机被顺时针旋转了 90 度,这就解释了为什么它看起来像逆时针旋转了 90 度,而该方向是不是考虑到(见那里的第二行,“编码 JPEG”。)
How to stop PHP iMagick auto-rotating images based on EXIF 'orientation' data的可能重复
【参考方案1】:
在您的 JPG 图像上运行 jhead -autorot
。这就是我在将图像放到网络上之前处理自动旋转的方法。
这将按照相机方向传感器的指定旋转图像,然后重置方向标志,以免再次意外旋转。
http://www.sentex.net/~mwandel/jhead/usage.html
(请注意,我从不自动旋转我的原件,只是将缩放版本作为我的脚本的一部分发送到网络。)
【讨论】:
【参考方案2】:[Orientation] => 6
有旋转,你可以切换到1
【讨论】:
【参考方案3】:exiftran
可以无损旋转JPEG图像,保持EXIF数据和缩略图一致。它也不会进行不必要的编辑(当我尝试 ImageMagick/GraphicsMagick 时发生这种情况),并产生稳定的输出。
标志:-a
在 EXIF 标记中应用旋转,-i
就地编辑,-p
保留文件时间戳。
用法:
exiftran -aip -- *.jpg
【讨论】:
以上是关于<img> 不需要的照片旋转的主要内容,如果未能解决你的问题,请参考以下文章
利用perspective 和 transform 里面的几个参数来实现旋转照片墙