Detección de rostros con Javascript en 3 minutos

Nunca ha sido tan fácil hacer una detección facial en este momento. Detección de rostros con Javascript en 3 minutos. Ni siquiera es necesario tener el conocimiento del algoritmo de procesamiento de imágenes. Toneladas de herramientas disponibles y de la biblioteca están disponibles para recoger. Hace un par de días, me encontré con este muy bonito complemento de jquery escrito por Jay Salvat (puedes ir a su sitio web y probar la demo si quieres) Creo que este es el más fácil de entender y configurar. Créeme, usted (o cualquiera) puede hacer una detección de rostros con javascript en menos de 3 minutos.

Tabla de Contenido

Detección de rostros con Javascript en 3 minutos

Preparar archivos

Primero, comencemos con la descarga de la última versión del complemento desde github . Una vez descargado, simplemente póngalo en su directorio web.

Te puede interesar: Convertir tabla HTML a un archivo Excel con Javascript

Esta es mi página web, ya tengo una foto de retrato preparada.

A continuación solo incluiré el plugin jQuery.

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

Detección de rostro

Inicie la detección de rostro seleccionando el elemento img con jQuery y llame al método FaceDetection. Deberá pasar la función de devolución de llamada para completar el evento, que se activará cuando el complemento haya completado el procesamiento de la imagen. El resultado devuelto es una matriz de todas las caras encontradas en esa imagen. Voy a mostrar la matriz en la consola para que podamos ver la estructura.

$ ( '#imagen' ) . FaceDetection ( {
completa: función ( caras ) {
consola. log ( caras ) ;

}
} ) ;

Después de ejecutar el código, dentro de cada elemento de la matriz, tendrá la posición, el ancho, la altura y otras propiedades de cada cara. Puede consultar el documento en el github para la definición completa de todos los campos.

Te puede interesar: Diseño de Tarjeta de Estilo RPG con efecto de Desplazamiento HTML y CSS

Cuadro delimitador

Ahora, con estos datos, aplicaré un cuadro delimitador para indicar la ubicación de la cara. Podemos hacerlo agregando el elemento div y usando la información de la matriz para establecer la posición y el tamaño. Estoy usando PositionX y PositionY, que son la posición absoluta del área frontal.

$ ( '#imagen' ) . FaceDetection ( {
completa: función ( caras ) {
consola. log ( caras ) ;
$ div = $ ( "<div>" , { "class" : "face-box" } ) ;
$ div. css ( 'top' , caras [ 0 ] .positionY ) ;
$ div. css ( 'izquierda' , caras [ 0 ] .positionX ) ;
$ div. css ( 'ancho' , caras [ 0 ]. ancho ) ;
$ div. css ( 'altura' , se enfrenta a [ 0 ] .height ) ;
$ ( "#wrapper" ) . añadir ( $ div ) ;
}
} ) ;

Lo siguiente es aplicar las propiedades CSS para todos los cuadros. Usaremos la posición absoluta para este tutorial. Además, no olvide configurar el tamaño y el estilo del borde.

.face-box {
borde: 1px sólido # f00;
posición: absoluta;
}

Tenga en cuenta que he fijado el índice de matriz en cero ya que solo tenemos una persona en la imagen. pero si está esperando más de una cara, deberá iterar a través de la matriz.

Te puede interesar: Crear PDF usando Javascript

Entonces, corremos el código!