html中的图像左转90度自动发出

Question

我遇到了显示图像的问题，我知道这听起来很傻，但我第一次真的遇到了这种问题。

图片网址：https://www.filepicker.io/api/file/KvxFiFSYQj1hGip67E0C?cache=true&w=320

如果我直接在浏览器中打开那么没问题。

如果我打开如下的html：

<img src="https://www.filepicker.io/api/file/KvxFiFSYQj1hGip67E0C?cache=true&w=320">

然后图像自动转90度。你可以在http://jsfiddle.net/中执行此操作并查看结果。

请欣赏一些帮助。谢谢！

的问候， 标记

Answer 1

使用EXIF元数据旋转图像。浏览器<img>标记由于某种原因不尊重此标记

您可以使用imagemagick之类的工具正确旋转图像。安装后，运行：

convert source.jpg -auto-orient dest.jpg

经过一番研究，显然有一个新的CSS属性image-orientation可以在不改变图像的情况下解决这个问题。不幸的是，only firefox supports this（截至2014年7月）。

img {
    image-orientation: from-image;
}

由于您使用filepicker.io，因此您可以使用其图像转换工具来完成工作。通过在文件句柄后添加/convert?rotate=exif，图像将通过其exif数据自动旋转。

<img src="https://www.filepicker.io/api/file/KvxFiFSYQj1hGip67E0C/convert?w=320&rotate=exif">

Result fiddle