Javascript Girl
  1. Javascript Girl
  3. Déterminer l'orientation des photos en JavaScript?
Intereting Posts
Javascript – renvoyez la corde entre crochets Comment utiliser DataBinder.Eval de répéteur dans le fichier OnClientClick de Asp.net. Obtenir un en-tête collant pour «pousser vers le haut», comme dans l'application iPhone d'Instagram en utilisant CSS et jQuery Dojo / Dijit définissant un message non valide et une validation défaillante Nouvelle image (), comment savoir si l'image est 100% chargée ou non? NE MarcoAachaps illustrésAclief Marco Chamonet ChamonetAachetAachetachachachachachachachélie Marco illustr portfólio Case à cocher Javascript Comment créer une nouvelle Date () en version JavaScript à partir d'un format de date non standard Comment détecter l'événement de désélection de bouton radio? Extension d'un ActiveXObject en javascript Désactiver le panoramique tactile pour le corps du site sur les appareils mobiles Comment puis-je rechercher de façon récursive une arborescence d'objets et retourner l'objet correspondant en fonction d'une clé / valeur en utilisant JavaScript / Prototype 1.7 Pourquoi l'événement javascript onchange ne se déclenche-t-il pas si l'autocomplète est activée? Vérifier si une case à cocher est cochée avec Javascript Exécution de JavaScript en dehors du navigateur, Cross Platform

Déterminer l'orientation des photos en JavaScript?

Nous utilisons FileReader pour obtenir une image, à partir d'une photo prise sur un iPhone, dans le navigateur. Nous utilisons ensuite drawImage() pour dessiner cette image sur un canvas . Le problème est que les photos prises sur un écran iPhone tournent sur la page. Nous ne pouvons pas le reproduire sur n'importe quel appareil Android.

Nous pouvons faire pivoter l'image sur la canvas assez facilement, mais comment déterminer la rotation requise? Nous avons essayé certaines bibliothèques de lecture EXIF ​​pour JavaScript ( exif.js ) mais nous n'avons pas pu lire avec succès l'orientation.

D'accord, il semble que vous pouvez lire les données exif en utilisant exif.js. 

 $("input").change(function() { var file = this.files[0]; fr = new FileReader; fr.onloadend = function() { var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result)); alert(exif.Orientation); }; fr.readAsBinaryString(file); });

Ce code utilise exif.js et binaryajax.js .

Cela fonctionne, mais seulement si vous l'essayez avec une photo prise sur ios. Je pense que l'Android ne fait que tourner l'image réelle et l'orientation est toujours 1, de sorte qu'ils n'écrivent même pas l'orientation vers exif. D'où nous avons été trompés en pensant que cela ne fonctionnait pas.

Pour les images qui ont une orientation, la valeur est lisible et peut être interprétée comme ci-dessous (celles de F's btw): 

  1 2 3 4 5 6 7 8 888888 888888 88 88 8888888888 88 88 8888888888 88 88 88 88 88 88 88 88 88 88 88 88 8888 8888 8888 8888 88 8888888888 8888888888 88 88 88 88 88 88 88 888888 888888

Fonctionne bien même sans binaryajax.js

Utilisez juste 

 EXIF.getData(changeEvent.target.files[0], function () { alert(EXIF.pretty(this)); });

Aussi , vous pouvez voir d'autres exemples.

Ou si vous voulez simplement l'étiquette d'orientation: 

 EXIF.getData(file, function () { alert(this.exifdata.Orientation); });

Mes deux centimes est que le cadre exif-js ne fonctionne pas pour moi et n'est pas nécessaire.

Au lieu de cela, ce que vous pouvez faire, c'est «surcharger» votre image src, créer un canevas, puis dessiner votre topon de votre image, ce que cela accomplit est de se débarrasser de toute rotation exif de l'image de l'image, car le tirage de la toile s'efface Données exif.

Lorsque le tirage au sort est terminé, vous verrez que votre image "retourne" à la façon dont il se verrait sur un navigateur PC