Comment extraire de l'image les informations concernant l'orientation de l'image chargée en Toile

Je suis entrain de créer une application web dans laquelle il permet de chargement d'images directement dans le canevas. Parfois, lorsque les images sont téléchargées à partir de l'iPad ou d'autres appareils de ce genre, ils sont orientés différemment.

Je suis en train d'essayer de trouver un moyen d'extraire de leur orientation info, et en conséquence de faire pivoter l'image dans le canevas.

Choses que j'ai essayé:

  • J'ai essayé d'extraire les informations EXIF : 
    dataUrl = canvas.toDataURL('image/jpeg');
var bin = atob(dataUrl.split(',')[1]);
var exif = EXIF.readFromBinaryFile(new BinaryFile(bin));
alert(exif.Orientation);

Mais il renvoie undefined.

Réf. cette réponse.

  • J'ai trouvé ce violon -

    Il lit le Base-64 PNG fichier et retourne la largeur et la hauteur de l'image mais je ne sais pas comment trouver l'orientation de l'image à l'aide de cette méthode.

Réf. cette réponse

Quelqu'un peut-il svp me pointer dans la bonne direction? Toute aide est très appréciée.

OriginalL'auteur Shivang Doshi | 2013-09-05

  1. 12

    Conditions préalables

    Il y a bien sûr une dépendance ici sur l'appareil qui prend la photo qu'il a effectivement un capteur qui permet de dire l'orientation.

    Certaines caméras ne sont pas les autres. Et même si elle dispose d'un capteur, il n'y a aucune garantie EXIF seront incorporés dans l'image. EXIF n'est pas incorporé pour PNG par exemple et certains de télécharger des images JPEG où EXIF est retiré de la vie privée et/ou des raisons de taille (par exemple. Coordonnées GPS etc.). Photoshop va supprimer EXIF si sauvegardées à l'aide de son "Enregistrer pour le web".

    Essayer différentes EXIF composants

    Il y a aussi la possibilité que les EXIFS composant que vous utilisez a un bug. Essayez d'autres EXIF des lecteurs ainsi à éliminer ce:

    (et il y a un tonne d'autres).

    De détection de "raw" orientation

    Dans le cas où vous n'avez qu'une "brute" de l'image, sans les informations EXIF (ie. PNG, TIFF, BMP), vous pouvez au moins de déterminer l'orientation de l'image bitmap lui-même en faisant cela:

    function isPortrait(img) {
    var w = img.naturalWidth || img.width,
        h = img.naturalHeight || img.height;
    return (h > w);
}

    Il suffit de passer l'image téléchargée élément de la fonction. Elle renvoie true si en mode portrait ou false si carré ou paysage.

    Si vous n'avez que des données codées en base64-uri juste ça comme source directement sur un élément de l'image:

    var img = document.createElement('img');
img.onload = function() {
    alert(isPortrait(img));
}
img.src = <data-uri-here>;

    Détection automatique

    De détecter automatiquement l'orientation de contenu est une chose très difficile à faire et il y a eu de nombreuses tentatives de faire cela avec des professionnels, des approches et de l'approche open source. Mais ils ne travaillent jamais à 100%.

    Vous aurez besoin d'un peu d'algorithmes pour détecter et reconnaître les formes, les lignes, les autres objets. Un énorme projet!

    Toutefois, si vos sujets sont pour la plupart de la personne/des visages, vous pouvez mettre en œuvre la détection de visage. Si vous ne détecte pas tout à la première passe faire pivoter de 90 degrés et essayez de nouveau. Si vous obtenez un match, alors vous pouvez l'utiliser comme base pour faire une "bonne estimation" (voir, par exemple,cette bibliothèque pour faire de la détection de visage)

    votre réponse et le lien suivant devrait faire l'affaire blog.chariotsolutions.com/2013/03/.... Sera la mise en œuvre de cette de temps en temps.
    désolé ma réputation ne marche pas me permettre de upvote vous répondre..merci pour vos contributions.
    Il y a une réponse ici, que j'ai testé et trouvé de travail: stackoverflow.com/a/32490603/4936905

    OriginalL'auteur

  2. 1

    Pour cela, je n'ai pas pu obtenir l'orientation de l'info car je n'étais pas à l'aide de l'image d'origine. Au lieu de cela, j'ai été en utilisant l'image compressée à l'aide de HTML canvas.J'ai utilisé l'image téléchargée initiale et il a commencé à travailler.

    OriginalL'auteur Manik Mittal