问

img标签显示错误的方向

A因为爱情Q_860 发布于 2023-01-04 12:45

我在这个链接的图像:http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

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



你知道发生了什么吗？



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

只需将其添加到您的CSS:

img {
    image-orientation: from-image;
}


根据2016年1月25日的规范,Firefox和iOS Safari(在前缀后面)是唯一支持此功能的浏览器.我发现Safari和Chrome仍有问题.但是,移动Safari似乎本身支持没有CSS标记的方向.

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

        
                
                    2023-01-04 12:45  回答
                       手机用户2502856985
                
            
                        
                你的形象实际上是颠倒的.但它有一个meta属性"Orientation",告诉观众应该旋转180度.某些设备/观看者不遵守此规则.

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

在Paint中打开它:颠倒在Photoshop中打开它:正确向上.等等

        
                
                    2023-01-04 12:45  回答
                       生命在于创新_475
                
            
                        
                这个问题也让我发疯。我在服务器端使用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

        
                
                    2023-01-04 12:46  回答
                       那朵逆风的蔷薇_708
                
            
                        
                您可以使用Exif-JS来检查图像的"Orientation"属性.然后根据需要应用css转换.

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

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

        
                
                    2023-01-04 12:46  回答
                       Chen.X.Jie
                
            
                        
                该答案基于使用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"  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";
            }
        });
};

        
                
                    2023-01-04 12:46  回答
                       奥咨达医疗器_械丶服务集团
                
            
                        
                如果可以访问Linux，则打开一个终端，进入包含映像的目录cd，然后运行

mogrify -auto-orient *


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

        
                
                    2023-01-04 12:46  回答
                       123456q
                
            
                        
                我忘了在这里添加自己的答案.我使用的是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

        
                
                    2023-01-04 12:46  回答
                       幸福的肖巍
                
            
                        
                这是您的三星手机所包含的EXIF数据.

        
                
                    2023-01-04 12:47  回答
                       我是你的特效
                
            
                        
                在image-orientation:from-image;更广泛地支持CSS：之前，我们正在使用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)

        
                
                    2023-01-04 12:47  回答
                       影子张被占用
                
            
                        
                另存为png为我解决了这个问题。

        
                
                    2023-01-04 12:47  回答
                       Min2502857657_377
                
            
                    
    
    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签