Contenido

Detección de caras en Javascript con canvas

11 mar

+ 6

Detectar caras ya no es solo cosa de Google Images. Ahora tu mismo puedes implementarlo en tu sitio web usando Javascript y las propiedades de canvas.

caras_canvas

¿Como funciona?

Para hacerlo funcionar únicamente necesitamos definir 2 ficheros en nuestro <head />.

<script type="text/javascript" src="dat.js"></script>
<script type="text/javascript" src="detector.js"></script>

El fichero dat.js indica la forma a detectar y el fichero detector.js es el que tiene la lógica del script capaz de detectar caras en cualquier foto.

Podemos detectar 1 o varias caras en las fotos, el proceso se convierte más lento dependiendo de cual elegimos (lógico).

1 cara

face_detect_one( document.getElementById("my_canvas") );

Multiples Caras

face_detect_multi( document.getElementById("my_canvas") , progress_callback, result_callback );
function progress_callback( steps_completed, total_steps){
....
}

Respuesta

En la respuesta que las funciones nos devuelve obtenemos los valores de un rectángulo en el que contendremos la cara de la persona.

var my_canvas = document.getElementById("my_canvas");

var result = face_detect_one( my_canvas ); 
if (result) draw_rect(result, my_canvas);

function draw_rect(r, my_canvas){
	var canvas_context = my_canvas.getContext("2d");
 	canvas_context.strokeRect( r.x, r.y, r.w, r.w );
}

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.