La balise img affiche une mauvaise orientation

142

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

Comme vous pouvez le voir, il s'agit d'une image normale avec une orientation correcte. Cependant, lorsque je place ce lien sur l'attribut src de ma balise d'image, l'image devient à l'envers. http://jsfiddle.net/7j5xJ/

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

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

html  css  image 
— Le journal paresseux
source
Dans Firefox, c'est à l'envers dans les deux cas. Je pense que Chrome est suffisamment intelligent pour le faire pivoter automatiquement en fonction des informations EXIF.
— dfsq
Hmm vraiment? Dans mon Firefox, l'original est toujours normal et l'image dans img est à l'envers.
— The Lazy Log
1
Je pense que l'image elle-même est à l'envers et cloudfrontpourrait la faire pivoter dans la page. Vous pouvez forcer une rotation via CSS jsfiddle.net/7j5xJ/1
— Kevin Lynch
2
regex.info/... Il a Orientation: Rotate 180en EXIF.
— dfsq
1
C'est un problème avec les métadonnées des photos qui spécifient l'orientation. Je ne sais pas pourquoi la balise d'image n'en tient pas compte. Je n'ai pas encore trouvé de bonnes réponses ...
— Chet

Réponses:

91

J'ai trouvé une partie de la solution. Les images ont désormais des métadonnées qui spécifient l'orientation de la photo. Il existe une nouvelle spécification CSS pourimage-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 prennent en charge cela. Je vois toujours des problèmes avec Safari et Chrome. Cependant, Safari mobile semble prendre en charge nativement l'orientation sans la balise CSS.

Je suppose que nous devrons attendre et voir si les navigateurs commenceront à prendre en charge image-orientation.

— Chet
source
3
Étrangement, les navigateurs que j'ai testés (Safari, Chrome et Firefox sur Mac dans leurs incarnations récentes) gèrent correctement le drapeau lorsque l'image est affichée directement sans aucun HTML autour d'elle.
— anw
2
Attention, car c'est expérimental. Vérifiez la compatibilité du navigateur, cela ne semble pas bon pour la plupart des navigateurs. J'espère qu'ils régleront ce problème à un moment donné.
— lostintranslation
35
Ce n'est pas compatible avec la plupart des navigateurs aujourd'hui caniuse.com/#search=image-orientation
— Gabriel C
2
Pourquoi diable les images ont-elles même des métadonnées d'orientation? Si vous vouliez vraiment faire pivoter l'image, ne vous contenteriez-vous pas de déplacer les pixels et d'échanger la largeur contre la hauteur?
— Jack Giffin
15
Comment cela a-t-il eu autant de votes positifs? Il est extrêmement non pris en charge et ne fonctionne pour rien d'autre que firefox caniuse.com/#search=image-orientation
— A Friend
26

Votre image est en fait à l'envers. Mais il a un méta attribut "Orientation" qui indique au spectateur qu'il doit être tourné de 180 degrés. Certains appareils / lecteurs n'obéissent pas à cette règle.

Ouvrez-le dans Chrome: vers le haut Ouvrez-le dans FF: vers le haut Ouvrez-le dans IE: à l'envers

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

— i-CONICA
source
1
Avez-vous une idée de la manière dont nous pouvons les éviter avant que l'utilisateur ne télécharge l'image? Comme cette image est téléchargée directement par l'utilisateur, je dois donc trouver un moyen de surmonter cela
— The Lazy Log
Si c'est pour un service qui hébergera des images, vous feriez mieux de réencoder les images de toute façon, pour des raisons de taille, de taille de fichier et de sécurité, afin que cela puisse les corriger dans la version réencodée.
— i-CONICA le
Je vois. J'aurai besoin de trouver une meilleure façon de gérer cela. Peut-être que j'ai besoin de traiter l'image après son téléchargement sur S3
— The Lazy Log
Vous pouvez utiliser la bibliothèque GD en PHP.
— i-CONICA
5
Un moyen plus simple serait de supprimer les métadonnées d'orientation et de retourner l'image. Imagemagick fournit une fonction convert -autoorient qui fera cela.
— saurabheights
19

Si vous avez accès à Linux, ouvrez un terminal, cd vers le répertoire contenant vos images puis exécutez

mogrify -auto-orient *

Cela devrait résoudre définitivement les problèmes d'orientation sur toutes les images.

— Paul Chris Jones
source
4
Cela a fonctionné pour moi, vous devrez peut-être exécuter brew install imagemagicksur mac si vous obtenezcommand not found: mogrify
— Kyle
Jusqu'à l'image suivante ... y a-t-il des inconvénients?
— Harry Bosh
12

J'ai oublié d'ajouter ma propre réponse ici. J'utilisais Ruby on Rails donc cela pourrait ne pas être applicable à vos projets en PHP ou dans d'autres frameworks. Dans mon cas, j'utilisais Carrierwave gem pour télécharger les images. Ma solution était d'ajouter le code suivant à la classe de téléchargement 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
— Le journal paresseux
source
1
bonne réponse mais comment puis-je appeler cette méthode sur un fichier image existant?
— Matrix
Vous devez recréer des versions. Je suppose que quelque chose comme ça fonctionnerait: stackoverflow.com/a/9065832/461640
— The Lazy Log
11

enregistrer au format png a résolu le problème pour moi.

— Seyed Mostafa Mousavi Kahaki
source
1
Cette solution n'est utile que pour les images qui ne sont pas des photographies: "Le format JPG est un format de fichier compressé avec perte. Cela le rend utile pour stocker des photos à une taille plus petite qu'un BMP. JPG est un choix courant pour une utilisation sur le Web car il est compressé. Pour stocker des dessins au trait, du texte et des graphiques iconiques à une taille de fichier plus petite, GIF ou PNG sont de meilleurs choix car ils sont sans perte. " - labnol.org/software/tutorials/…
— Kc Gibson
génial, résolu merci
— T.Shashwat
2
Je l'ai enregistré au format PNG, puis de nouveau en JPG, ce qui réduit la taille du fichier et enregistre l'orientation correctement, merci.
— MDave
10

Cette réponse s'appuie sur la réponse de bsap en utilisant Exif-JS , mais ne repose pas sur jQuery et est assez compatible même avec les navigateurs plus anciens. Voici des exemples de fichiers html et 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";
            }
        });
};
— VMQ
source
exif-js est maintenant tellement obsolète et non entretenu qu'il échoue dans certains environnements, comme partout où le mode strict est activé. Nous avons vraiment besoin d'une solution pour cela. Mon application me frustre la merde et chaque solution de rechange que j'ai trouvée a de nombreux inconvénients.
— Methodician
9

Vous pouvez utiliser Exif-JS , pour vérifier la propriété "Orientation" de l'image. Ensuite, appliquez une transformation css si nécessaire.

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

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

Ce problème me rendait fou aussi. J'utilisais PHP côté serveur, je n'ai donc pas pu utiliser les solutions @The Lazy Log (ruby) et @deweydb (python). Cependant, cela m'a orienté dans la bonne direction. Je l'ai corrigé 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 souhaitez en savoir plus. http://php.net/manual/en/imagick.getimageorientation.php

— user4504661
source
6

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

— Trace DeCoy
source
1
Ah, donc cela ne se produit qu'avec les images prises par le téléphone Samsung?
— The Lazy Log
4
Arrive avec plusieurs. Je l'ai également vu sur les iPhones.
— Trace DeCoy
Les métadonnées EXIF ​​peuvent inclure des informations sur la photographie elle-même (vitesse d'obturation, ouverture de l'objectif, sensibilité iso, distance de mise au point, etc.), des données de contexte (date, heure, température, humidité), et peuvent contenir les coordonnées GPS ainsi que l'angle de rotation arrondi jusqu'à 90 ° multiple. Une grande majorité des smartphones et des caméras d'aujourd'hui placent ces métadonnées dans le bloc EXIF, donc à mon humble avis, ce n'est qu'une question de temps que les navigateurs appliquent automatiquement la rotation d'image correcte.
— ManuelJE
5

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

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 se produire qu'une seule fois lors du téléchargement du 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)
— deweydb
source
3

Cela se produit car l'orientation d'origine de l'image n'est pas celle que nous voyons dans la visionneuse d'images. Dans de tels cas, l'image est affichée à la verticale dans la visionneuse d'images, mais elle est horizontale en réalité.

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

  1. Ouvrez l'image dans l'éditeur d'image comme Paint (dans Windows) ou ImageMagick (sous Linux).

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

  3. Enregistrez l'image.

Cela devrait résoudre le problème de manière permanente.

— Yuvraj Patil
source
1

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 tout ou la plupart des données EXIF ​​d'une image. Habituellement, je ne garde 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 sur le Web, il est judicieux de les réduire de toute façon via Enregistrer pour le Web. Pour ceux qui ne connaissent pas Photoshop, je ne doute pas qu'il existe des ressources en ligne pour redimensionner une image et la dépouiller de toutes les données EXIF ​​inutiles.

— AlGator
source
4
Mais si vous développez une application dans laquelle les utilisateurs peuvent choisir n'importe quelle image à télécharger, comment utiliser Photoshop dans ce cas? :)
— The Lazy Log
1

Je pense qu'il y a quelques problèmes dans l'orientation de l'image de correction automatique du navigateur, par exemple, si je visite l'image directement, elle montre la bonne orientation, mais affiche une mauvaise orientation dans certaines pages html de sortie.

— Kai Zou
source
-19

Utilisez un style externe. dans la feuille html, donnez le nom de la classe à la balise. dans la feuille de style, utilisez l'opérateur point précédé du nom de la classe, puis écrivez le code suivant

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }
— msd
source
Ce n'est pas une solution généralisée.
— Fonctionnera
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.