Temps de lecture : 2 minutes

Vous souhaitez mettre en place un système d’avatar sur votre site Internet, et vous souhaitez que l’utilisateur puisse envoyer sa photo, puis puisse la recadrer selon son désir ? Le problème réside dans la détection du visage. Comment faire pour pré-cadrer le ou les visages ?

Face Detection est un plugin JQuery qui vous permettra de récupérer les coordonnées des visages présents sur la photo, et ainsi permettre de recadrer celle-ci.

Vous trouverez à la page Face Detection un exemple, sur une image de bonne taille et contenant deux visages de face.

Encore une fois, l’utilisation est très simple, il vous suffit, après avoir inclu les fichiers javascript, de faire un appel de cette manière :

var coords = $('#myPicture').faceDetection();

Après cet appel, la variable coords contient (comme son nom l’indique) les coordonnées des visages qui ont été détectés sous le format suivant :

  • x: coordonnée X du visage
  • y: coordonnée Y du visage
  • width: largeur du visage
  • height: hauteur du visage
  • positionX: positon en x par rapport à document
  • positionY: positon en y par rapport à document
  • offsetX: positon en x par rapport à parent
  • offsetY: positon en y par rapport à parent

Voici le résultat obtenu sur une image après avoir fait appel au plugin, ici les coordonnées sont utilisées pour dessiner un rectangle autour de la tête :

En combinant ceci à Système de tag d’images avec JQuery image annotate on pourrait obtenir un tag d’images avancé, détectant les visages et vous proposant d’y mettre un nom.