Detección de caras (Face detection) con jQuery

Ver ejemplo Descargar fuente

La detección de caras para la creación de aplicaciones tiene un importante significado, poder emplear una tecnología como esta en un sitio web mediante un plugin JavaScript es algo que puede resultar útil en muchas ocasiones; por ejemplo, puedes tomar una imagen desde la cámara del dispositivo y a posterior verificar si en la imagen existe un rostros.

El plugin para jQuery que les traigo a continuación, además de hacer su trabajo de manera aceptable su instalación y uso son muy sencillos como veremos en la siguiente entrada; el plugin en cuestión no emplea el Canvas si no nos devuelve las posiciones sobre la imagen correspondientes para indicar donde estan ubicados las caras o rostros que detectó.

Instalación del plugin FaceDetection

El plugin FaceDetection permite reconocer caras en imágenes e incluso videos; su funcionamiento es muy sencillo:

Instalamos el plugin disponible en el enlace anterior junto con una versión de jQuery; como indicamos en un inicio, es necesario jQuery para el funcionamiento del plugin JavaScript:

<script src="jquery.min.js"></script>
<script src="jquery.facedetection.min.js"></script>

Aplicamos el plugin a la imagen mediante el método faceDetection():

$('#picture').faceDetection({
        complete: function (faces) {
            console.log(faces);
        }
});

Y esto es todo, con sólo invocar la función faceDetection(), podrás detectar uno o más rostros en la imagen analizada, a partir de aquí es posible realizar muchas operaciones sobre la imagen con el array (compuesto de objetos) devuelto al completar la detección de la(s) cara(s); entre las más importantes tenemos:

Un ejemplo real de los datos que devolvería al analizar una imagen:

[Object, Object, Object, Object]

La imagen analizada está compuesta de cuatro caras detectadas, en donde cada posición del array (cada Object que vimos arriba) corresponde a una cara detectada en la imagen o video; al analizar uno de las posiciones del array veremos todos los atributos que componen a la cara identificada:

[Object, Object, Object, Object]
0: Object
confidence: 9.849374709999992
height: 44.32027794030165
neighbors: 12
offsetX: 902.7123863876474
offsetY: 56.38056916787977
positionX: 250.21238638764734
positionY: 26.380569167879774
scaleX: 0.967741935483871
scaleY: 0.9684813753581661
width: 44.32027794030165
x: 250.21238638764734
y: 26.380569167879774

Un sencillo ejemplo para dibujar recuadros en las caras identificadas

Necesitaremos un HTML como el siguiente:

<div class="picture-container">
   <img id="picture" class="picture" src="picture.jpg">
</div>

En donde tengamos la imagen a analizar dentro de un contenedor.

Con esta función podemos crear un recuadro para que encierre la cara identificada:

$('#picture').faceDetection({
    complete: function (faces) {
        console.log(faces);
        
        for (var i = 0; i < faces.length; i++) {
            $('<div>', {
                'class':'face',
                'css': {
                    'position': 'absolute',
                    'left':     faces[i].x * faces[i].scaleX + 'px',
                    'top':      faces[i].y * faces[i].scaleY + 'px',
                    'width':    faces[i].width  * faces[i].scaleX + 'px',
                    'height':   faces[i].height * faces[i].scaleY + 'px'
                }
            })
            .insertAfter(this);
        }
    },
    error:function (code, message) {
        alert('Error: ' + message);
    }
});

• Indicamos la imagen a analizar con $('#picture').faceDetection.
• Recorremos todas las caras identificadas y accedemos a sus atributos desde for (var i = 0; i < faces.length; i++).
• Creamos un recuadro que insertamos dentro del contenedor de la imagen según la posición de la cara identificada (faces[i].x y faces[i].y).

Resultado final

Consideraciones sobre el reconocimiento de caras con el plugin FaceDetection

Como todo algoritmo puede fallar; es decir, puede que no reconozca todas las caras en un imagen; el ángulo, sombras son factores que influyen al momento de reconocer caras en una imagen:

Importante

Debes ejecutar el script asociado al plugin dentro de un servidor; en caso contrario daría el siguiente error:

 Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. 

Esto es debido a que el plugin utiliza la API de Canvas provista por HTML5 para realizar sus operaciones, entre ellas la función getImageData para extraer información de la imagen.

Ver ejemplo Descargar fuente