img标签显示错误的方向

142

我在此链接上有一张图片：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"/>
展开摘要

你知道发生了什么吗？

html  css  image 
— 懒人日志
source
在Firefox中，这两种情况都是颠倒的。我认为Chrome足够智能，可以根据EXIF信息自动旋转。
— dfsq 2014年
嗯，真的吗？在我的Firefox中，原始图像仍然正常，而img中的图像却颠倒了。
— The Lazy Log
1
我认为图像本身是颠倒的，cloudfront可能会在页面中旋转它。您可以通过CSS jsfiddle.net/7j5xJ/1
— Kevin Lynch
2
regex.info/...它Orientation: Rotate 180的EXIF。
— dfsq 2014年
1
照片元数据指定方向是一个问题。我不知道为什么图片标签不能解决这个问题。我尚未找到任何好的答案...
— Chet 2015年

Answers:

91

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

只需将其添加到您的CSS中即可：

img {
    image-orientation: from-image;
}

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

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

— 切特
source
3
我测试过的奇怪浏览器（最近使用的Safari浏览器，Mac上的Safari，Chrome和Firefox）在直接显示图片而没有任何HTML的情况下正确处理了该标志。
— 2015年
2
请谨慎操作，因为它是实验性的。查看浏览器兼容性，它对大多数浏览器来说并不理想。希望他们能在某个时候解决这个问题。
— lostintranslation
35
这与当今的大多数浏览器不兼容caniuse.com/#search=image-orientation
— Gabriel C
2
为什么世界上图像甚至都包含取向元数据？如果您真的想旋转图片，那么您会不会只是在像素周围移动并将宽度换成高度？
— 杰克·吉芬
15
如何获得如此多的支持？除firefox caniuse.com/#search=image-orientation
— A Friend
26

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

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

在Paint中打开它：颠倒在Photoshop中打开它：正确向上。等等

— 康尼卡
source
1
您是否知道在用户上传图片之前如何防止这些情况？由于此图像是由用户直接上传的，因此我需要找到一种方法来克服这一问题
— The Lazy Log
如果是用于托管图像的服务，则出于尺寸，文件大小和安全性的原因，最好还是对图像进行重新编码，因此可以将它们固定在重新编码的版本中。
— i-CONICA 2014年
我懂了。我将需要找到一种更好的方法来处理此问题。将图像上传到S3之后，也许我需要处理该图像
— The Lazy Log
您可以在PHP中使用GD库。
— i-CONICA 2014年
5
一种更简单的方法是删除方向元数据并翻转图像。Imagemagick提供了convert -autoorient函数，它将执行此操作。
— saurabheights 2016年
19

如果您可以访问Linux，请打开一个终端，进入包含映像的目录cd，然后运行

mogrify -auto-orient *

这将永久解决所有图像上的方向问题。

— 保罗·克里斯·琼斯
source
4
这对我有用，如果可能，您可能需要brew install imagemagick在Mac 上运行command not found: mogrify
— Kyle
直到下一张图片..它有什么缺点？
— 哈里·波什
12

我忘了在这里添加自己的答案。我使用的是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
— 懒人日志
source
1
好的答案，但是如何在现有的图像文件上调用此方法？
— 矩阵
您必须重新创建版本。我想这样的事情会起作用：stackoverflow.com/a/9065832/461640
— The Lazy Log
11

另存为png为我解决了这个问题。

— 赛义德·莫斯塔法·穆萨维·卡哈基
source
1
此解决方案仅适用于非照片图像：“ JPG格式是有损的压缩文件格式。这对于以小于BMP的尺寸存储照片非常有用。JPG是在Web上使用的常见选择，因为它是对于以较小的文件大小存储线条图，文本和图标图形，GIF或PNG是更好的选择，因为它们无损。- labnol.org/software/tutorials/...
— 的Kc吉布森
令人敬畏，已解决，谢谢
— T. Shashwat
2
将其另存为PNG，然后再次返回JPG，这样可以减小文件大小并正确保存方向，谢谢。
— MDave
10

该答案基于使用Exif-JS的 bsap答案，但不依赖jQuery，即使与较旧的浏览器也相当兼容。以下是示例html和js文件：

rotation.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>

rotation.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";
            }
        });
};
— 虚拟机
source
现在，exif-js已经过时且无法维护，以致在某些环境（例如启用了严格模式的任何环境）中失败。我们确实需要一个解决方案。我的应用程序让我很沮丧，我发现的每个变通办法都有很多弊端。
— 卫理公会
9

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

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

                if(orientation == 6)
                    $(imageElement).css('transform', 'rotate(90deg)')
});
— 汁液
source
7

这个问题也让我发疯。我在服务器端使用PHP，因此无法使用@The Lazy Log（ruby）和@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/zh/imagick.getimageorientation.php

— 用户名
source
6

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

— 追踪诱饵
source
1
嗯，所以这只发生在三星手机拍摄的图像上吗？
— The Lazy Log
4
发生几个。我也在iPhone上看到过它。
— Trace DeCoy
EXIF元数据可能包含有关照片本身的信息（快门速度，镜头光圈，等感光度，聚焦距离等），上下文数据（日期，时间，温度，湿度），并且可能包含GPS坐标以及四舍五入的旋转角度高达90°的倍数。如今，绝大多数智能手机和相机都将这些元数据放在EXIF块中，因此恕我直言，浏览器自动应用正确的帧旋转只是时间问题。
— ManuelJE
5

在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)
— 杜威数据库
source
3

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

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

  1. 在图像编辑器中打开图像，例如paint（在Windows中）或ImageMagick（在Linux中）。

  2. 左右旋转图像。

  3. 保存图像。

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

— 尤夫拉·帕蒂尔（Yuvraj Patil）
source
1

解决该问题的简单方法（无编码）是使用Photoshop的“保存为Web”导出功能。在对话框中，可以选择删除全部或大部分图像的EXIF数据。我通常只保留版权和联系信息。另外，由于直接来自数码相机的图像太大了，无法在Web上显示，因此最好还是通过Save for Web来缩小图像的尺寸。对于那些不精通Photoshop的用户，我毫不怀疑有在线资源可用于调整图像大小并去除不必要的EXIF数据。

— AlGator
source
4
但是，如果您正在开发一个用户可以选择要上传的图像的应用程序，那么在这种情况下如何使用Photoshop？:)
— The Lazy Log
1

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

— 邹凯
source
-19

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

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }
— MSD
source
这不是一个通用的解决方案。将专门用于有问题的图像
— th3pirat3 '18
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.