問題描述

我有一個影像在這個連結：http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

正如你所看到的，這是正確的方向的正常影像。但是，當我將此連結設定為我的影像標籤的 src 屬性時，影像將被顛倒。 http://jsfiddle.net/7j5xJ/

<body>
    <img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>
</body>

你有什麼想法嗎？

最佳解決方法

我找到了解決方案的一部分。圖片現在具有指定照片方向的後設資料。 image-orientation 有一個新的 CSS 規範。

只需將其新增到您的 CSS：

img {
    image-orientation: from-image;
}

根據 2016 年 1 月 25 日的規格，Firefox 和 iOS Safari(字尾在字首) 是唯一支援此功能的瀏覽器。我看到 Safari 和 Chrome 仍然出現問題。然而，移動 Safari 似乎本來支援沒有 CSS 標籤的方向。

我想我們必須等待瀏覽器是否開始支援 image-orientation 。

次佳解決方法

你的形象實際上是顛倒的。但它有一個元屬性”Orientation”，告訴觀眾它應該是旋轉 180 度。某些裝置/瀏覽者不遵守此規則。

在 Chrome 中開啟它：正確的方法在 FF 中開啟它：正確的方式在 IE 中開啟它：顛倒

在油漆中開啟它：顛倒在 Photoshop 中開啟它：正確的方式。等等

第三種解決方法

我忘了在這裡新增自己的答案。我在使用 Ruby on Rails，因此它可能不適用於您在 PHP 或其他框架中的專案。在我的情況下，我正在使用 Carrierwave gem 上傳影像。我的解決方案是將以下程式碼新增到 uploader 類中，以便在儲存檔案之前修復 EXIF 問題。

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end

第四種方法

這是您的三星手機所包含的 EXIF 資料。

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。