web-dev-qa-db-fra.com

Y a-t-il un moyen de dire aux navigateurs de respecter l'orientation jpeg exif?

Je sais que la rotation automatique des fichiers JPG est désactivée dans les navigateurs.

Ils ne peuvent pas l'activer car cela casserait la mise en page de certains sites Web.

Existe-t-il une propriété CSS? Ou un code javascript pour y parvenir? Ou autre chose? Ou peut-être que la solution à ce problème n'existe pas encore?

htmlcssbrowserjpegexif
30
Marc MAURICE

CSS image-orientation: from-image

des spécifications https://www.w3.org/TR/css4-images/#the-image-orientation

6.2. Orientation d’une image sur la page: propriété ‘orientation-image’

orientation de l'image: depuis l'image

from-image: si l'image a une orientation spécifiée dans ses métadonnées, telle que EXIF, cette valeur est calculée selon l'angle que les métadonnées spécifient est nécessaire pour orienter correctement l'image. Si nécessaire, cet angle est ensuite arrondi et normalisé comme décrit ci-dessus pour une valeur. Si aucune orientation n’est spécifiée dans ses métadonnées, cette valeur est calculée comme suit: «0deg». 

Matching Chrome-Issue: https://bugs.chromium.org/p/chromium/issues/detail?id=158753

Mais le support du navigateur n’est pas encore là: https://developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility

Rotation via JS

Voici un extrait de code JS: https://Gist.github.com/runeb/c11f864cd7ead969a5f0

Ma conclusion

Je pense que la rotation de l'image sur le serveur avec des outils tels que imagemagick est trop lourde.

Le navigateur peut faire pivoter l’image, mais l’application Web doit lui indiquer comment la faire pivoter explicitement.

Cette rotation explicite du navigateur pourrait se faire comme ceci: https://stackoverflow.com/a/11832483/633961

26
guettli

J'ai écrit un petit script php qui fait pivoter l'image . Assurez-vous de stocker l'image en faveur de la recalculer à chaque demande.

<?php

header("Content-type: image/jpeg");
$img = 'IMG URL';

$exif = @exif_read_data($img,0,true);
$orientation = @$exif['IFD0']['Orientation'];
if($orientation == 7 || $orientation == 8) {
    $degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
    $degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
    $degrees = 180;
} else {
    $degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);

?>

À votre santé

3
Thom

Comme l'a dit l'affiche précédente, vous devrez faire pivoter l'image elle-même. Mais à côté de cela, vous pouvez également définir/réinitialiser la balise de rotation dans EXIF. De cette façon, vous éviterez que les spectateurs qui respectent la balise d’orientation la retournent. Un outil qui peut éditer le fichier EXIF ​​pour vous s'appelle ExifTool , et est gratuit.

1
Jeroen Kransen

Nous utilisons imagemagick pour faire pivoter les images en fonction de leurs informations d’orientation exif. Peut-être que ce serait une option pour vous?

1
Ridcully

L'outil exifautotran peut être utilisé auparavant pour remplacer rapidement l'orientation EXIF ​​par celle par défaut (1, pour "en haut à gauche") et pour faire pivoter automatiquement l'image afin que l'image paraisse identique à celle précédant la transformation. Vous pouvez ensuite utiliser les fichiers JPG ainsi obtenus dans une page Web sans vous soucier de cela:

a@b:~/a/b/100_PANA$ exifautotran *.JPG
Executing: jpegtran -copy all -rotate 90 P1000638.JPG
Executing: jpegtran -copy all -rotate 270 P1000641.JPG
Executing: jpegtran -copy all -rotate 90 P1000642.JPG
Executing: jpegtran -copy all -rotate 90 P1000645.JPG
…
0
Alice M.