Problème d'orientation EXIF dans Safari Mobile
J'ai une application angular 2 dans l'environnement de production qui vous permet de choisir une photo de profil. Récemment, j'ai effectué des tests avec safari mobile, spécifiquement pour IOS 13.3.1 version (plus ancienne) et IOS 13.4.1 (nouvelle) version. J'ai remarqué que l'image est affichée en rotation en fonction de la version du navigateur safari utilisée ( j'ai construit un stackblitz pour cela que vous peut revoir ):
Version IOS 13.3.1 (plus ancienne)
IOS 13.4.1 (nouveau)
Lorsque je prends des images d'un iPhone en mode portrait et que je télécharge l'image sur mon application, elle s'affiche pivotée uniquement pour IOS version 13.3.1 (plus ancienne). Cependant, j'ai examiné les images de méta-informations EXIF de chacun de mes appareils et j'ai constaté que les deux images avaient la même valeur dans la propriété d'orientation:
Version IOS 13.3.1 (plus ancienne)
IOS 13.4.1 (nouveau)
Ma question est. Pourquoi l'affichage de l'image change-t-il selon la version IOS, sachant que dans les deux cas l'orientation EXIF est la même valeur (6)?
C'est un sujet qui m'inquiète puisque j'avais déjà résolu ce problème en faisant pivoter l'image en fonction de la valeur d'orientation EXIF pour son affichage correct (exif.js a été créé pour gérer cette situation en détectant le drapeau d'orientation exif), mais ce problème réapparaît maintenant avec la nouvelle version d'IOS. Quel serait un exemple de code que je peux utiliser pour le rendre durable dans le temps? N'y a-t-il pas un consensus parmi les navigateurs pour gérer l'orientation des images?
Quelle est l'explication de ce comportement illogique?
Merci beaucoup!
Le navigateur Webkit fait pivoter les images avant de les télécharger en fonction des données EXIF, puis il est à nouveau appliqué par votre application. Nous avons pu le confirmer sur la nouvelle (81) version de Chrome et Mobile Safari sur 13.4. Ensuite, l'application les fait pivoter davantage et cela se déforme.
Nous sommes également tombés sur cela lorsque notre mobile s'est soudainement comporté différemment et a finalement trouvé la cause profonde de cela.
WebKit (iOS) et Android (Chrome) ont récemment modifié le comportement par défaut de image-orientation Propriété CSS. Alors que c'était none avant, c'est maintenant from-image. Cela signifie: Avant, ils ignoraient les données EXIF d'une image par défaut, alors qu'ils les utilisent maintenant pour corriger automatiquement l'image. Ce qui rompt notre propre correction automatique basée sur la bibliothèque exifreader.
Voici quelques liens pertinents:
Assez drôle, l'équipe Slack semble également avoir rencontré ceci:
Heureusement, l'auteur de la bibliothèque exifreader (qui a rencontré les mêmes problèmes quelques semaines plus tard) m'a également guidé vers un moyen de détecter le comportement. Vous pouvez trouver sa réponse ici:
J'ai également remarqué que Modernizr a un test pour cela, donc j'utilise actuellement une version modernizr personnalisée pour détecter le comportement du navigateur.