html5预览中的图像方向错误

Question

假设我的图像不是直立的（我在窗口浏览器中打开它并且图像不直立），但是当我将它上传到某个服务器（例如gmail，stackoverflow）时。图像变得直立。

我问这个问题是我正在用html5和javascript编写预览逻辑。我谈到的图像显示了我在窗口浏览器中看到的内容。只是想知道服务器是否有一些技巧来调整方向？

windows中显示的图片：

直接上传到堆栈溢出的图像：

Answer 1

我猜你正在谈论你使用canvas元素生成或操纵客户端的图像，然后将其渲染回img标记。正确的吗？

服务器端，可以通过查看图像的EXIF方向标志来确定方向。可以使用像jQuery fileExif这样的库来检查此标志客户端。

Answer 2

如果您使用ImageInfo之类的脚本，则可以获取EXIF数据（如果图像有）。如果还没有，你几乎不知道为什么会这样。可能会在您正在使用的计算机上显示“假”。某些图像管理器可能会保留原始旋转图像的副本。

EXIF属性Orientation可能会告诉您图像是否已更改，具体取决于图像的尺寸与其方向的比较。

Answer 3

在服务器端：
您可以使用Graphics Magic等工具正确自定义图像：http://www.graphicsmagick.org/GraphicsMagick.html

gm.exe -convert -auto-orient MyImage.jpg MyImageCorrectOrientation.jpg