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

2024-04-02

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

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

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

在 iPad 和 iPhone 上 - 照片会自动旋转,因此照片方向正确,但尺寸全部错误,因此照片全部被拉伸和扭曲。

我想了解以下信息:

  1. 这是 iOS 或其他设备上浏览器的一项众所周知的功能吗?
  2. 有没有办法使用 CSS 或 Javascript 禁用此功能?
  3. 有没有办法检测到它的发生并纠正尺寸<img>标签?我不介意浏览器纠正照片的方向,我只是希望尺寸正确。

EDITS

使标题更加以问题的形式 - 也将问题重新表述为更直接

更多编辑

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

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

在实际场景中,JSON 由 PHP 代码呈现,PHP 代码可以读取图像并根据其使用的内容输出宽度高度getimagesize()


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

  1. 是的,iOS 故意将显示方向存储在 EXIF 数据中(包括分辨率、快门、GPS 等),但将图像数据保存在设备方向中。
    有关 EXIF 的更多信息,请参阅维基百科 http://en.wikipedia.org/wiki/Exchangeable_image_file_format.

  2. 从来没听说过。

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

编号。 3 需要更多解释:

你可以使用像这样的库this one http://www.nihilogic.dk/labs/exif/从 javascript 访问 EXIF 数据(包括 jQuery 插件)。 方向标签定义为: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 数据还包括宽度和高度,因此如果它们与您认为的不同,也可以帮助识别旋转问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 CSS/Javascript 防止 iOS 上 HTML 上的自动旋转图像 的相关文章

随机推荐