javascript - 如何使用 CSS/Javascript 在 HTML 上防止 iOS 上的自动旋转图像

Question

我正在创建一个照片网站 - 我上传了一张自己的照片，但实际上方向不正确(图像逆时针旋转了 90 度)。我已经从我的 iPhone 上传了这张图片，这显然是故意以这种方式存储的图片。

在我的网站上，HTML 页面呈现了一个 JSON 对象，其中包含照片的 URL 以及图像尺寸。我正在使用 jQuery mobile - 并加载页面，我在页面上放置了一个链接，当您单击照片时，它会将照片显示为弹出窗口。弹出窗口呈现 <img>标签的尺寸足够小以适合当前视口(viewport)宽度/高度内的图像。它使用我之前提到的 JSON 计算维度，结果来自 $(window).width()和 $(window).height() .

在桌面上 - 照片以错误的方向正确显示(因为这是照片的实际存储方式)。

在 iPad 和 iPhone 上 - 照片会自动旋转，因此照片的方向正确，但尺寸都不对，所以照片都被拉伸(stretch)和扭曲了。

我想知道以下内容:

1. 这是 iOS 或其他设备上浏览器的常见功能吗？
2. 有没有办法使用 CSS 或 Javascript 禁用此功能？
3. 有没有办法检测它的发生并更正 <img> 的尺寸标签？我不介意浏览器纠正了照片的方向，我只希望尺寸合适。

编辑

使标题更多地以问题的形式出现——同时重新制定问题以使其更直接

更多编辑

这是一个带有示例的 JS Fiddle:http://jsfiddle.net/5JKgn/

如果您在台式计算机上单击链接，弹出窗口会显示方向不正确的图像。如果您在 iPhone 或 iPad 上单击链接，弹出窗口会正确显示图像方向，但尺寸错误，因此照片会被拉伸(stretch)。

在实际场景中，JSON 由 PHP 代码呈现，PHP 代码可以读取图像并输出使用 getimagesize() 获取的图像的宽度和高度

Answer 1

好的，我会尝试回答这个问题:

1. 是的，iOS 有意将显示方向存储在 EXIF 数据中(包括分辨率、快门、GPS 等)，但在设备方向中保存图像数据。
   有关 EXIF 的更多信息，请参阅 Wikipedia .

2. 据我所知没有。

3. 是的，您应该能够访问 EXIF 数据并确定方向和尺寸。

编号。 3 需要更多解释:

您可以使用像 this one 这样的库从 javascript(包括 jQuery 插件)访问 EXIF 数据。方向标签定义为:0x0112 : "Orientation"并存储为数字。

使用该信息，您可以确定方向:

Value | Orientation
------|----------------------
1     | horizontal (normal)
2     | flip horizontal
3     | rotate 180°*
4     | flip vertical
5     | transpose
6     | rotate 90°*
7     | transverse
8     | rotate 270°*
* rotation is counter clockwise

这应该能让您至少为您的 <img> 交换宽度/高度如果需要。请注意，EXIF 数据还包括宽度和高度，因此如果它们与您认为的不同，也有助于识别旋转问题。