当前位置 : 主页 > 网页制作 > css >

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

来源:互联网 收集:自由互联 发布时间:2021-06-13
我正在创建一个照片网站 – 我上传了一张我自己的照片,这张照片实际上是错误定向的(图像逆时针旋转了90度).我已经从我的iPhone上传了这张图片,这张图片显然是故意以这种方式存储的
我正在创建一个照片网站 – 我上传了一张我自己的照片,这张照片实际上是错误定向的(图像逆时针旋转了90度).我已经从我的iPhone上传了这张图片,这张图片显然是故意以这种方式存储的.

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

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

在iPad和iPad上iPhone – 照片是自动旋转的,因此照片的方向正确,但尺寸都是错误的,所以照片都被拉伸和扭曲.

我想知道以下内容:

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

EDITS

以问题的形式更多地提出标题 – 并将问题重新表述为更直接的问题

更多编辑

这是一个JS小提琴,有一个例子:http://jsfiddle.net/5JKgn/

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

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

为了使我的评论正式化 – 也许你可以回避这个问题:

>如果您不需要存储精确的原稿,则可以在存储/检索图像时旋转数据.
>或者,正如OP在回复中指出的那样,只需删除EXIF标记,浏览器将无法再使用它来“修复”方向.

(p.s.总是remember to ask ‘why’足够的时间来弄清楚你实际上要解决的问题:D)

网友评论