Saltar al contenido

Detección de rostros con Javascript en 3 minutos

Nunca ha sido tan fácil hacer una detección facial en este momento. 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.

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.

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

Te puede interesar:   El verdadero Amor de un Programador

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:   10 portafolios de Developer para inspirarte

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:   Generar archivo de Texto con JS

Entonces, corremos el código!

Que te ha parecido este tutorial sobre detección de rostro en 3 minutos. Te dejo el tutorial para darte una idea en acción del código.

Continua aprendiendo con nosotros:

Punto de venta en java NetBeans código fuente
Diseños de tablas HTML
Obtener localización JavaScript
Xampp
Barras Gif
Crear un archivo JavaScript
0/5 (0 Reviews)
Comparte