问题描述

我有一个图像在这个链接：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 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。