Detectar caras con jQuery

1
120

a target=”_blank” href=”http://facedetection.jaysalvat.com/”>jQuery Face Detection es un plugin para jQuery que permite reconocer las caras humanas dentro de una imagen y enmarcarlos, sin duda un impresionante plugin que nos puede Order cialis usa servir para etiquetar personas o cubrir rostros que no deberían mostrarse.
Antes de implementarlo en nuestra Web lo que debemos hacer es bajarnos el plugin.

 

Descargar Plugin

 

Javascript

Estas librerías realizaran la funcionalidad de detectar las caras, todos son necesarios para el propósito.
[html]
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="js/facedetection/ccv.js"></script>
<script src="js/facedetection/face.js"></script>
<script src="js/jquery.facedetection.js"></script>
[/html]
Este script servirá para guardar las coordenadas de cada rostro en un array de objetos, luego lo recorrera para armar el cuadro que los etiquetara, finalmente insertamos el html generado en un elemento que encierre a la imagen. (Este script debe estar justo antes de cerrar el </body>).
[javascript]
&lt;script&gt;
$(function() {
var $this = $(this);
var coords = $(‘img’).faceDetection();
for (var i = 0; i &lt; coords.length; i++) {
$(‘&lt;div&gt;’, {
‘class’:’face’,
‘css’: {
‘position’: ‘absolute’,
‘left’: coords[i].positionX +’px’,
‘top’: coords[i].positionY +’px’,
‘width’: coords[i].width +’px’,
‘height’: coords[i].height +’px’
}
})
.appendTo(‘#content’);
}
});
&lt;/script&gt;
[/javascript]

HTML

Esta es la estructura que debe tener el html de la imagen.
[html]
&lt;div id="content"&gt;
&lt;img src="img/faces.jpg" /&gt;
&lt;/div&gt;
[/html]

 

descargar

 

1 COMMENT

Comments are closed.