如何使用CSS/Javascript阻止iOS上的HTML上的自動旋轉圖像

我正在創建一個照片網站 - 我上傳了一張實際上未正確定向的圖像（圖像逆時針旋轉90度）。我已經從我的iPhone上傳了這張圖片，該圖片顯然是有意將圖片以這種方式存儲的。如何使用CSS/Javascript阻止iOS上的HTML上的自動旋轉圖像

在我的網站上，HTML頁面呈現了一個JSON對象，其中包含照片的URL以及圖片尺寸。我使用的是jQuery mobile - 並且在頁面上加載了一個鏈接，當你點擊圖片時，它會以彈出的方式顯示圖片。彈出窗口會呈現一個尺寸足夠小的<img>標記，以適合當前視口寬度/高度內的圖像。它使用前面提到的JSON計算尺寸，以及$(window).width()和$(window).height()的結果。

在桌面上 - 照片以錯誤的方向正確顯示（因爲這是照片實際存儲的方式）。

在iPad上& iPhone - 照片是自動旋轉的，所以照片的方向是正確的，但尺寸都是錯誤的，所以照片全部伸出並扭曲。

我想了解以下內容：

這是在iOS或其他設備的瀏覽器的俗稱功能？
有沒有辦法使用CSS或Javascript禁用此功能？
有沒有辦法檢測到它發生並更正<img>標籤的尺寸？我不介意照片的方向已被瀏覽器更正，我只是希望尺寸合適。

編輯

使標題更以問題的形式 - 也重新配製的問題更直接的

多個編輯

這裏是一個JS撥弄示例：http://jsfiddle.net/5JKgn/

如果您單擊桌面組件上的鏈接子彈，彈出窗口顯示不正確的圖像。如果您點擊iPhone或iPad上的鏈接，彈出窗口會顯示正確導向的圖片，但尺寸不正確，因此圖片被拉伸。

在現實情況下，JSON是由PHP代碼變得可以讀出圖像和輸出寬度高度它所得到使用getimagesize()

來源

2014-01-18 codefactor

你試過只設置圖像高度/寬度自動帶最大高度沿/寬度？ – monners

@monners這可能是可以接受的 - 但請看看小提琴 - 我希望彈出窗口在視口中居中顯示圖像，並調整照片大小，以便無論您的屏幕有多大都可以看到它（即在iphone上真的很小） – codefactor

看看下面的答案，是你在追求什麼或者我錯過了什麼？如有需要，我很樂意進行更新。 – monners

爲了形式化我的意見 - 也許你可以迴避這個問題：

如果您不需要存儲精確的原稿，則可以在存儲/檢索圖像時旋轉數據。
或者，正如OP在迴應中指出的，刪除EXIF標籤，瀏覽器將不再能夠使用它來「固定」方向。

（PS始終remember to ask 'why'足夠的時間來弄清楚什麼問題，你實際上是在試圖解決：d）

來源

2014-01-30 19:00:38 brichins

您知道的任何PHP代碼可以在圖像存儲時刪除EXIF標籤嗎？我將照片存儲在文件系統中 - 並使用$ _FILES變量檢索照片以獲取上傳的文件。 – codefactor

@codefactor我不是一個PHP的人自己，但[這個問題]（http://stackoverflow.com/questions/5384962/writing-exif-data-in-php）和[這個問題]（HTTP：// stackoverflow.com/questions/229446/how-do-i-add-exif-data-to-an-image）看起來很有希望。如果您正在處理現有文件並且不想爲每個請求修改它們，則需要在調整EXIF後重新保存每個文件。但是，如果允許用戶下載他們的原稿（而不是僅僅呈現出庫），您可能需要夾在每個請求的標籤（或使每個文件的歸檔副本服務了原件）。 – brichins

客戶希望能夠通過FTP或通過Web界面上傳圖像 - 因此這些文件將作爲原件存儲。但也許請求獲取圖像應剝離它們。 – codefactor

好吧，我會盡力回答這個問題：

是的，這是爲了將EXIF數據中的顯示方向（例如分辨率，快門，GPS等）存儲在顯示器中，但將圖像數據以設備方式保存。
有關EXIF的更多信息，請參閱Wikipedia。
不是我所知道的。
是的，您應該可以訪問EXIF數據並確定方向和尺寸。

Nr。 3需要多一點解釋：

您可以使用類似this one的庫來訪問來自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數據還包括寬度和高度，因此如果它們與您認爲它們應該是不同的，也可能有助於識別旋轉問題。

來源

2014-01-24 14:00:05 Shirkrin

有沒有辦法在PHP服務器上編寫包含URL +維度的JSON對象？請注意，圖像存儲在一個文件夾中，並可以通過PHP服務器讀取 - 理想情況下，服務器可以以某種方式更正照片？ – codefactor

這裏是一個JS提琴，如果你想嘗試解決這個問題使用Javascript：http://jsfiddle.net/5JKgn/ – codefactor

這是有用的 - 我想我可以使用'exif_read_data'在PHP中查找信息並糾正相片。 – codefactor

對桌面瀏覽器使用媒體查詢，並將圖像的css設置爲100％高度和自動寬度。

@media (min-width: 900px) 
{ 
img {width:auto; height:100%;} 
}

你甚至可以考慮使用這些變量，而不是計算他們的移動網站

來源

2014-01-24 15:35:03 rootsup

您不需要我們的Javascript明確設置上載圖片的高度/寬度。刪除你的腳本，只需插入這些內嵌的高度/寬度的風格，只是添加以下到您的樣式表的一部分：

.ui-popup-container { 
    width: calc(100% - 40px); /* simulates a 20px margin */ 
} 

.ui-popup-container img { 
    width: auto; 
    height: auto; 
    max-width: 100%; 
    max-height: 100%; 
}

這裏有一個更新的Fiddle

來源

2014-01-25 07:13:01 monners

這很接近，但彈出窗口太大。 X按鈕距離太遠並且向右 - X按鈕應該位於圖像的右上角，並且整個彈出框應該有20px的邊距。 – codefactor

此外 - 我最好喜歡照片在桌面上具有正確的方向。 – codefactor

它看起來像X按鈕問題，彈出窗口高度問題只發生在桌面上，當屏幕比寬高時更寬。 – codefactor

如何使用CSS/Javascript阻止iOS上的HTML上的自動旋轉圖像

回答

相關問題