當用戶選擇一張照片時隨機旋轉的圖像

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