Morton 30 de octubre de 2011 a las 08.25
   Imprimir artículo
elWebmaster.com

Cómo detectar rostros en imágenes en tu sitio web


jquerywideLa tecnolog√≠a de reconocimiento facial ha avanzado considerablemente en estos √ļltimos a√Īos, y es cada vez m√°s explotada por los sitios webs que la utilizan para herramientas como etiquetado autom√°tico de fotos, o detecci√≥n de personas.

Si quieres utilizar el reconocimiento facial, puedes acceder a librer√≠as gratuitas. Una librer√≠a muy potente y gratuita es la creada por Jay Salvat y Liu Liu. Se trata de un plugin jQuery que recibe una imagen y devuelve un array de coordenadas de caras encontradas en la imagen. En este art√≠culo te ense√Īaremos c√≥mo utilizarlo.

Haz clic aquí para ver una demostración >>

Cuatro archivos JS deben ser requeridos para utilizar este plugin:

  1. %MINIFYHTMLd2fb2b74daf58492bfa13e462cfb06c94%%MINIFYHTMLd2fb2b74daf58492bfa13e462cfb06c95%%MINIFYHTMLd2fb2b74daf58492bfa13e462cfb06c96%%MINIFYHTMLd2fb2b74daf58492bfa13e462cfb06c97%

Haz clic en este enlace para descargar el plugin >>

El plugin faceDetection devuelve un array de objetos que representan las coordenadas de las caras en la foto, en el caso de encontrarlas. Por ejemplo:

  1. var coords = jQuery("#myImage").faceDetection();
  2. /* Returns:
  3.   {
  4.     x: 525
  5.     y: 435,
  6.     width: 144,
  7.     height: 144,
  8.     positionX: 532.6353328125226,
  9.     positionY: 443.240976080536,
  10.     offsetX: 532.6353328125226,
  11.     offsetY: 443.240976080536,
  12.     confidence: 12.93120119,
  13.     neighbour: undefined,
  14.   }
  15. */

Por otro lado, debes agregar callbacks de evento a cada llamado:

  1. var coords = jQuery("#myImage").faceDetection({
  2.   complete: function(image, coords) {
  3.     // Do something
  4.   },
  5.   error: function() {
  6.     console.warn("Could not process image");
  7.   }
  8. });

Queda en t√≠ qu√© har√°s cuando las caras sean detectadas. Puedes, por ejemplo, a√Īadir un recuadro alrededor de su cada rostro:

  1. jQuery("img").each(function() {
  2.   var img = this;
  3.   // Get faces cooridnates
  4.   var coordinates = jQuery(img).faceDetection();
  5.   // Make boxes if faces are found
  6.   if(coordinates.length) {
  7.     coordinates.forEach(function(coord) {
  8.       jQuery("<div>", {
  9.         css: {
  10.           position: "absolute",
  11.           left: coord.positionX + 5 + "px",
  12.           top: coord.positionY + 5 + "px",
  13.           width: coord.width + "px",
  14.           height: coord.height + "px",
  15.           border: "3px solid white"
  16.         }
  17.       }).appendTo(img.parentNode);
  18.     });
  19.   }
  20. });
  21. </div>

Haz clic aquí para ver una demostración >>

Haz clic en este enlace para descargar el plugin >>

Eso es todo. ¬°Esperamos que te sea de utilidad!

Fuente original del artículo: David Walsh Blog
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Pablo dice:

    Por que no reconoce algunos rostros, y reconoce cosas que no son rostros? No habra algun algoritmo mejor?

  2. Romy Bompart dice:

    me parece que es un gran esfuerzo … !!! ojala y lo mejoren m√°s.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder