如何强制 iOS Safari 忽略 EXIF 旋转？答案

【问题标题】：How can I force iOS safari to ignore EXIF rotation?如何强制 iOS Safari 忽略 EXIF 旋转？
【发布时间】：2014-03-13 19:53:43
【问题描述】：

似乎我们遇到了一个问题，即桌面上的图像可以正确直立显示，但在 iPad 上却被旋转为横向。经过进一步调查，iPad 似乎从图像上的 EXIF 数据中查看旋转信息，并确定它应该以横向而不是纵向显示（这是它真正需要的）。

有没有什么办法可以在不下载所有成千上万的图像、剥离 EXIF 数据并将其重新上传到我们的云提供商的情况下处理这个问题？

【问题讨论】：

标签： ios ipad browser exif

【解决方案1】：

这非常奇怪，但出于某种原因 - 当您将图像绝对定位在视频元素（甚至是空的视频标签）上方时 - 带有 EXIF 旋转的图像不会不旋转！

<video></video>
<img src="url.jpg" style="position:absolute;top:0;left:0" />

在 IOS 5.1 Iphone 4 上测试。（我希望没有人将此作为错误提交！;)）。

【讨论】：

我发现如果旋转的图像是绝对定位的，它会报告naturalWidth和naturalHeight的旋转值，但它会显示未旋转。

【解决方案2】：

使用 jQuery，它更短，HTML 结构：

<a href="foo" style="width:100px; height:100px;">
   <img src="bar" style="position:absolute; width:100px; height:100px; top:0; left:0;">
</a>

Javascript：

setTimeout($.proxy(function(){
   this.css("position", "");
}, $('<video style="visibility:hidden; position:absolute; width:1px; height:1px">').before("img")), 0);

注意：超时可防止有时位置不正确的显示错误。

在 iOS 7.1、7.0 和 6.1 上像魅力一样工作！

【讨论】：

这对我有用，但是，它会扭曲图像，因为我的图像不是一个完美的正方形，例如 100 像素 x 100 像素。它使宽度与图像横向的宽度相同（图像比宽度高）。
img- 和 a-tag 的高度和宽度实际上只是示例性的..该示例使用绝对定位的 img，它会被周围的锚点裁剪。它应该适用于不同的大小，甚至根本没有。空的视频标签紧挨着 img 标签似乎很重要。