Question

我在此链接上有一张图片：http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

如您所见，这是一张正确方向的普通图像。但是，当我将此链接设置为我的图像标记的src属性时，图像会颠倒。 http://jsfiddle.net/7j5xJ/

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

你知道发生了什么吗？

Answer 1

我找到了部分解决方案。图像现在具有指定照片方向的元数据。有一个新的CSS spec for image-orientation。

只需将其添加到您的CSS：

img {
    image-orientation: from-image;
}

根据2016年1月25日的规范，Firefox和iOS Safari（前缀后面）是唯一支持此功能的浏览器。我仍然看到Safari和Chrome的问题。但是，移动版Safari似乎本身支持没有CSS标记的方向。

我想我们必须等待，看看浏览器是否会开始支持image-orientation。

Answer 2

您的图片实际上是颠倒的。但它有一个meta属性“Orientation”，告诉观众应该旋转180度。某些设备/观看者不遵守此规则。

在Chrome中打开它：正确向上在FF中打开它：正确向上在IE中打开它：颠倒

在Paint中打开它：颠倒在Photoshop中打开它：正确的方式。等

Answer 3

我忘了在这里添加自己的答案。我使用的是Ruby on Rails，因此它可能不适用于PHP或其他框架中的项目。就我而言，我使用Carrierwave gem上传图像。我的解决方案是在保存文件之前将以下代码添加到上传器类以修复EXIF问题。

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

Answer 4

这是三星手机所包含的EXIF数据。

Answer 5

您可以使用Exif-JS来检查图像的“方向”属性。然后根据需要应用css变换。

EXIF.getData(imageElement, function() {
                var orientation = EXIF.getTag(this, "Orientation");

                if(orientation == 6)
                    $(imageElement).css('transform', 'rotate(90deg)')
});

Answer 6

这个答案建立在使用Exif-JS的bsap答案的基础上，但不依赖于jQuery，即使对于旧浏览器也相当兼容。以下是示例html和js文件：

rotate.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
  <html>
  <head>
    <style>
      .rotate90 {
       -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
       -o-transform: rotate(90deg);
       -ms-transform: rotate(90deg);
       transform: rotate(90deg);
      }
      .rotate180 {
       -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
       -o-transform: rotate(180deg);
       -ms-transform: rotate(180deg);
       transform: rotate(180deg);
      }
      .rotate270 {
       -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
       -o-transform: rotate(270deg);
       -ms-transform: rotate(270deg);
       transform: rotate(270deg);
      }
    </style>
  </head>
  <body>
    <img src="pic/pic03.jpg" width="200" alt="Cat 1" id="campic" class="camview">
    <script type="text/javascript" src="exif.js"></script>
    <script type="text/javascript" src="rotate.js"></script>
  </body>
  </html>

rotate.js：

window.onload=getExif;
var newimg = document.getElementById('campic');
function getExif() {
    EXIF.getData(newimg, function() {
            var orientation = EXIF.getTag(this, "Orientation");
            if(orientation == 6) {
                newimg.className = "camview rotate90";
            } else if(orientation == 8) {
                newimg.className = "camview rotate270";
            } else if(orientation == 3) {
                newimg.className = "camview rotate180";
            }
        });
};

Answer 7

直到CSS：image-orientation:from-image;得到更普遍的支持，我们正在使用python进行服务器端解决方案。这是它的要点。检查exif数据的方向，然后相应地旋转图像并重新保存。

我们更喜欢这种解决方案而不是客户端解决方案，因为它不需要在客户端加载额外的库，并且此操作只需要在文件上载时进行一次。

if fileType == "image":
    exifToolCommand = "exiftool -j '%s'" % filePath
    exif = json.loads(subprocess.check_output(shlex.split(exifToolCommand), stderr=subprocess.PIPE))
    if 'Orientation' in exif[0]:
        findDegrees, = re.compile("([0-9]+)").search(exif[0]['Orientation']).groups()
        if findDegrees:
            rotateDegrees = int(findDegrees)
            if 'CW' in exif[0]['Orientation'] and 'CCW' not in exif[0]['Orientation']:
                rotateDegrees = rotateDegrees * -1
            # rotate image
            img = Image.open(filePath)
            img2 = img.rotate(rotateDegrees)
            img2.save(filePath)

Answer 8

另存为png解决了我的问题。

Answer 9

这个问题也让我发疯了。我在我的服务器端使用PHP，所以我无法使用@The Lazy Log（ruby）＆amp; @deweydb（python）解决方案。但它指出了正确的方向。我使用Imagick的getImageOrientation（）修复了它。

<?php 
// Note: $image is an Imagick object, not a filename! See example use below. 
function autoRotateImage($image) { 
    $orientation = $image->getImageOrientation(); 

    switch($orientation) { 
        case imagick::ORIENTATION_BOTTOMRIGHT: 
            $image->rotateimage("#000", 180); // rotate 180 degrees 
        break; 

        case imagick::ORIENTATION_RIGHTTOP: 
            $image->rotateimage("#000", 90); // rotate 90 degrees CW 
        break; 

        case imagick::ORIENTATION_LEFTBOTTOM: 
            $image->rotateimage("#000", -90); // rotate 90 degrees CCW 
        break; 
    } 

    // Now that it's auto-rotated, make sure the EXIF data is correct in case the EXIF gets saved with the image! 
    $image->setImageOrientation(imagick::ORIENTATION_TOPLEFT); 
} 
?>

如果您想了解更多内容，请点击此链接。 http://php.net/manual/en/imagick.getimageorientation.php

Answer 10

解决问题的一种简单方法，即无编码，就是使用Photoshop的Save for Web导出功能。在对话框中，可以选择删除图像的全部或大部分EXIF数据。我通常只保留版权和联系信息。此外，由于直接来自数码相机的图像对于网络显示来说非常大，因此最好通过Save for the Web来缩小它们的尺寸。对于那些不懂Photoshop的人，我毫不怀疑有一些在线资源可用于调整图像大小并剥离任何不必要的EXIF数据。

Answer 11

我认为浏览器自动修复图像方向时会遇到一些问题，例如，如果我直接访问图片，它会显示正确的方向，但是在某些退出html页面中显示错误的方向。

Answer 12

如果您有权使用Linux，则打开一个终端，进入包含映像的目录cd，然后运行

mogrify -auto-orient *

这应该可以永久解决所有图像上的方向问题。

Answer 13

发生这种情况是因为图像的原始方向与我们在图像查看器中看到的不一致。在这种情况下，图像在图像查看器中垂直于我们显示，但实际上是水平的。

要解决此问题，请执行以下操作：

在图像编辑器中打开图像，例如paint（在Windows中）或ImageMagick（在Linux中）。
左右旋转图像。
保存图像。

这应该可以永久解决此问题。

Answer 14

使用外部样式。在html表格中给出了标签的类名称。在样式表中使用点运算符，前面是类名，然后编写以下代码

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }

img标签显示错误的方向

14 个答案: