如何使用CSS / Javascript防止iOS上的自动旋转图像 [英] How to prevent auto-rotating images on iOS on HTML with CSS/Javascript

问题描述

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

I am creating a photo site - I uploaded a photo of myself which is actually incorrectly oriented (the image is rotated 90 degrees counter clockwise). I have uploaded this image from my iPhone, which apparently has the image stored this way on purpose.

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

On my site, the HTML page has rendered a JSON object that contains the URL to the photo as well as the image dimensions. I am using jQuery mobile - and onload of the page I put a link on the page, and when you click the photo it displays the photo as a popup. The popup renders an <img> tag with dimensions that are small enough to fit the image within the current viewport width/height. It calculates the dimensions using the JSON I previously mentioned, and the results from $(window).width() and $(window).height().

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

On desktop - the photo correctly displays in the wrong orientation (because that is how the photo is actually stored).

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

On iPad & iPhone - the photo is auto-rotated so the photo is correctly oriented, but the dimensions are all wrong so the photo is all stretched out and distorted.

我想要知道以下内容：

1. 这是iOS或其他设备上浏览器的常见功能吗？


2. 有没有办法使用CSS或Javascript禁用此功能？


3. 有没有办法检测到它发生了并纠正< img>的尺寸？ 标签？我不介意浏览器更正了照片的方向，我只想让尺寸合适。

1. Is this a commonly known feature of browsers on iOS or other devices?
2. Is there a way to disable this functionality using CSS or Javascript?
3. Is there a way to detect that it happened and correct the dimensions of the <img> tag? I don't mind that the photo's orientation was corrected by the browser, I just want the dimensions to be proper.

编辑

以问题的形式更多地提出标题 - 同时重新提出问题更直接

Making the Title more in the form of a question - Also reformulating the question to be more direct

更多编辑

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

Here is a JS Fiddle with an example: http://jsfiddle.net/5JKgn/

如果单击桌面计算机上的链接，弹出窗口显示图像不正确的方向。如果单击iPhone或iPad上的链接，弹出窗口会显示正确定向的图像，但尺寸错误，因此照片会拉伸。

If you click the link on a desktop computer, the popup shows the image improperly oriented. If you click the link on an iPhone or iPad, the popup shows the image properly oriented, but the dimensions are wrong so the photo is stretched.

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

In the real scenario, the JSON is rendered by PHP code which can read the image and outputs the width height from what it gets using getimagesize()

推荐答案

要正式化我的意见 - 或许你可以回避这个问题：

To formalize my comments - perhaps you can just sidestep the issue:

1. 如果您不需要存储确切的原稿，则可以在存储/检索图像时旋转数据。

1. If you don't need to store exact originals, you could rotate the data when storing/retrieving the image.

或者，正如OP在回复中指出的那样，只需删除EXIF标记，浏览器将无法再使用它来修复方向。

Or, as the OP noted in response, just remove the EXIF tag, and browsers will no longer be able to use it for 'fixing' the orientation.

（ps始终 记得问'为什么' 足够的时间来弄清楚你实际想要解决的问题：D）

(p.s. Always remember to ask 'why' enough times to figure out what problem you're actually trying to solve :D)

这篇关于如何使用CSS / Javascript防止iOS上的自动旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！