web-dev-qa-db-fra.com

La balise img affiche une mauvaise orientation

J'ai une image sur ce lien: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

Comme vous pouvez le constater, il s'agit d'une image normale avec une orientation correcte. Cependant, lorsque je mets ce lien sur l'attribut src de ma balise d'image, l'image est inversée. http://jsfiddle.net/7jjxx/

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

Avez-vous une idée de ce qui se passe?

htmlcssimage
107
The Lazy Log

J'ai oublié d'ajouter ma propre réponse ici. J'utilisais Ruby sur Rails afin que cela ne soit peut-être pas applicable à vos projets dans PHP ou dans d'autres frameworks. Dans mon cas, j’utilisais la gemme Carrierwave pour télécharger les images. Ma solution a été d'ajouter le code suivant à la classe de téléverseur pour résoudre le problème EXIF ​​avant d'enregistrer le fichier.

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

J'ai trouvé une partie de la solution. Les images ont maintenant des métadonnées qui spécifient l'orientation de la photo. Il y a un nouveau spéc. CSS pour image-orientation .

Ajoutez simplement ceci à votre CSS:

img {
    image-orientation: from-image;
}

Selon les spécifications du 25 janvier 2016, Firefox et iOS Safari (derrière un préfixe) sont les seuls navigateurs qui le prennent en charge. Je vois toujours des problèmes avec Safari et Chrome. Cependant, Safari mobile semble prendre en charge de manière native l’orientation sans la balise CSS.

Je suppose que nous devrons attendre et voir si les navigateurs vont commencer à supporter image-orientation.

77
Chet

Votre image est réellement à l'envers. Mais il possède un méta-attribut "Orientation" qui indique au téléspectateur que ce doit être une rotation de 180 degrés. Certains appareils/lecteurs n'obéissent pas à cette règle.

Ouvrez-le dans Chrome: dans le bon sens Ouvrez-le dans FF: dans le bon sens Ouvrez-le dans IE: à l'envers

Ouvrez-le dans Paint: à l'envers. Ouvrez-le dans Photoshop: dans le bon sens. etc.

22
i-CONICA

Cette réponse s'appuie sur la réponse de bsap à l'aide de Exif-JS , mais ne repose pas sur jQuery et est relativement compatible même avec les navigateurs plus anciens. Voici des exemples de fichiers html et 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";
            }
        });
};
6
VMQ

Vous pouvez utiliser Exif-JS pour vérifier la propriété "Orientation" de l'image. Appliquez ensuite une transformation CSS au besoin.

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

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

Ce sont les données EXIF ​​que votre téléphone Samsung intègre.

6
Trace DeCoy

Ce problème me rendait fou aussi. J'utilisais PHP sur mon serveur, je ne pouvais donc pas utiliser les solutions @The Lazy Log (Ruby) & @deweydb (python). Cependant, cela m'a orienté dans la bonne direction. Je l'ai fixé sur le support en utilisant getImageOrientation () d'Imagick.

<?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); 
} 
?>

Voici le lien si vous voulez en savoir plus. http://php.net/manual/en/imagick.getimageorientation.php

5
user4504661

save as png a résolu le problème pour moi.

5
Seyed Mostafa Mousavi Kahaki

Jusqu'à ce que CSS: image-orientation:from-image; soit plus universellement pris en charge, nous réalisons une solution côté serveur avec python. En voici l'essentiel. Vous vérifiez l'orientation des données exif, faites pivoter l'image en conséquence et enregistrez à nouveau.

Nous préférons cette solution aux solutions côté client car elle ne nécessite pas de chargement de bibliothèques supplémentaires côté client, et cette opération ne doit avoir lieu qu'une seule fois lors du téléchargement de fichier.

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)
4
deweydb

Si vous avez accès à Linux, ouvrez un terminal, accédez au répertoire contenant vos images, puis lancez

mogrify -auto-orient *

Cela devrait résoudre de manière permanente les problèmes d'orientation sur toutes les images.

2
Paul Jones

Un moyen simple de résoudre le problème, sans codage, consiste à utiliser la fonction d’exportation Enregistrer pour le Web de Photoshop. Dans la boîte de dialogue, vous pouvez choisir de supprimer la totalité ou la plupart des données EXIF ​​d'une image. En général, je ne conserve que les droits d'auteur et les coordonnées. De plus, étant donné que les images provenant directement d'un appareil photo numérique sont considérablement surdimensionnées pour l'affichage Web, il est judicieux de les réduire par le biais de l'option Enregistrer pour le Web. Pour ceux qui ne connaissent pas bien Photoshop, je n'ai aucun doute sur le fait qu'il existe des ressources en ligne pour redimensionner une image et la supprimer de toute donnée EXIF ​​non nécessaire.

1
AlGator

Je pense qu’il ya certains problèmes d’orientation automatique des images dans le navigateur. Par exemple, si je visite directement l’image, elle affiche la bonne orientation, mais affiche une orientation incorrecte dans certaines pages HTML à la sortie.

0
Kai Zou

Cela se produit puisque l'orientation d'origine de l'image n'est pas ce que nous voyons dans la visionneuse d'images. Dans de tels cas, l'image est affichée verticalement par rapport au visualiseur d'images, mais elle est horizontale en réalité.

Pour résoudre ce problème, procédez comme suit:

  1. Ouvrez une image dans un éditeur d’image comme Paint (sous Windows) ou ImageMagick (sous Linux).

  2. Faire pivoter l'image vers la gauche/droite.

  3. Enregistrez l'image.

Cela devrait résoudre le problème de façon permanente.

0
Yuvraj Patil