当用户选择一张照片时随机旋转的图像

Question

我正在为我正在处理的移动网络应用制作照片选择器，并且好像图像正在“随机”旋转。例如，当我选择使用手机相机拍摄照片并且手机方向为横向时，出于某种原因，图像呈现90度。但是，当我拍摄照片并将手机方向更改为肖像时，图像将被正确呈现。
如果我选择一个现有的图像，其中一些将被正确渲染，其中一些不是。

我已经试图在图像大小上找到图案（如果这只是发生在水平或垂直图像上），但似乎并不是问题，因为它们都具有相同的尺寸，无论设备方向如何。

我想知道是否有任何理智的方法来解决这个问题。我只是不想让图像旋转。

Here's a code snippet to test。我现在只在iOS 6上进行测试。

Answer 1

原来，问题是把图像设置到容器上作为背景图片并利用新的CSS3属性background-size: cover按比例填充整个可见区域。出于某种原因，移动浏览器有时不知道如何进行适当的2D变换，并最终旋转被设置为背景的图像。

解决方法是附加一个<img>标记，现在在桌面和移动浏览器上都能正常工作。

Ps .:仅在移动版Chrome和Safari，iOS6和iOS7中进行测试。

Answer 2

无论方向如何，iPhone图像都以相同的方式保存。如果您使用右侧的主页按钮横向拍摄照片，照片始终是正确的。您需要读取EXIF数据以确定如何旋转它。

这里是与读取EXIF数据的问题： Accessing JPEG EXIF rotation data in JavaScript on the client side

这类似于这样的问题： Camera image changes orientation