<img> 不需要的照片旋转

Posted

技术标签:

【中文标题】<img> 不需要的照片旋转【英文标题】:<img> unwanted photo rotation 【发布时间】:2015-04-07 07:07:44 【问题描述】:

我在使用 html5 的表格中嵌入了一张图片。图像自动逆时针旋转 90 度,没有应用 CSS,也没有 javascript(曾经有,因此在某些标签上使用了 class 参数,但我在 @987654327 中注释掉了 &lt;style&gt;&lt;/style&gt; 块@。

该图像是由带有 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代码并将其应用于&lt;img&gt;,但是当它旋转时,它并没有调整表格,并且覆盖了文本。

有人知道我可以使用的解决方案吗?

--编辑--

我使用带有 PHP 的 EXIF 扩展来print_r() 图像上的 EXIF 标头,并且似乎没有任何方向标头。如果您不介意仔细检查,可以在 Pastebin here 上找到这些标题,任何人都可以阅读此内容。

【问题讨论】:

可能您的图像在 (EXIF) 元数据中包含方向信息,因此专用的图像查看器应用程序会自动旋转它,而简单的 Web 浏览器则不会。在这种情况下,您在浏览器中看到的将是图像的非旋转 版本,只有其他一些软件会显示它旋转给您。跨度> @CBroe 有没有办法从元数据中删除该信息? @CBroe 我使用 PHP 在修改后的图像的 EXIF 标头上做了一个print_r(),似乎没有任何方向数据。我在问题中添加了一些信息 “而且似乎没有任何方向数据” – 那么[Orientation] =&gt; 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] =&gt; 6有旋转,你可以切换到1

【讨论】:

【参考方案3】:

exiftran可以无损旋转JPEG图像,保持EXIF数据和缩略图一致。它也不会进行不必要的编辑(当我尝试 ImageMagick/GraphicsMagick 时发生这种情况),并产生稳定的输出。

标志:-a 在 EXIF 标记中应用旋转,-i 就地编辑,-p 保留文件时间戳

用法:

exiftran -aip -- *.jpg

【讨论】:

以上是关于<img> 不需要的照片旋转的主要内容,如果未能解决你的问题,请参考以下文章

圣诞节用女神照片做了一个旋转木马

如何在 <img> 标签内显示二进制照片

利用perspective 和 transform 里面的几个参数来实现旋转照片墙

调用系统相机导致照片旋转问题的修复

在JSP页面中使用<img src=标签向网页添加照片,在浏览器显示不出来?

HTML+CSS 旋转照片墙!源代码(简易动画干货快收藏!!)