What is the face detection method implemented by JavaScript?

This article introduces how the face detection method realized by JavaScript is, the content is very detailed, interested friends can refer to it, hope to be helpful to you.

I have always been interested in face tagging, detection and face recognition technologies in videos and pictures. Although I know that getting logic and algorithms to develop face recognition software or plug-ins is beyond my imagination. When I knew that the Javascript library could recognize smiles, eyes and face structures, I was inspired to write a tutorial. There are many libraries that are either purely Javascript-based or based on the java language.

Today, we start to learn about tracking.js, a lightweight javascript library developed by Eduardo Lundgren that allows you to do real-time face detection, color tracking and tagging your friends' faces. In this tutorial, we will see how we can detect faces, eyes and mouths from still images.

You can see a tutorial that provides useful examples with tips and tips as well as more technical details.

First, we need to create a project, download the project from github and extract the build folder, and place the build folder according to your file and directory structure. In this tutorial, I used the following file and directory structure.

Folder structure

Project Folder │ │ index.html │ ├─── assets │ face.jpg │ └─── js │ tracking-min.js │ tracking.js │ └─── data eye-min.js eye.js face-min.js face.js mouth-min.js mouth.js

You can see the javascript file we extracted from tracking.js in the js folder. Here is the html code for index.html.

HTML code

@ tuts Face Detection Tutorial .rect {border: 2px solid # a64ceb; left:-1000px; position: absolute; top:-1000px;} # img {position: absolute; top: 50%; left: 50%; margin:-173px 00-300px;}

In the above HTML code, we introduce four javascript files from tracking.js that help us detect faces, eyes and mouths from images. Now let's write a piece of code to detect faces, eyes and mouths from static images. I chose this picture on purpose because there are many different expressions and posturing faces in this picture.

To achieve this, we need to modify the code in the header of the html file.

HTML code

@ tuts Face Detection Tutorial .rect {border: 2px solid # a64ceb; left:-1000px; position: absolute; top:-1000px;} # img {position: absolute; top: 50%; left: 50%; margin:-173px 00-300px;} / / tracking code. _ window.onload = function () {var img = document.getElementById ('img'); var tracker = new tracking.ObjectTracker ([' face', 'eye',' mouth']); / / Based on parameter it will return an array. Tracker.setStepSize (1.7); tracking.track ('# img', tracker); tracker.on ('track', function (event) {event.data.forEach (function (rect) {draw (rect.x, rect.y, rect.width, rect.height);});}) Function draw (x, y, w, h) {var rect = document.createElement ('div'); document.querySelector (' imgContainer') .appendChild (rect); rect.classList.add ('rect'); rect.style.width = w +' px'; rect.style.height = h + 'px'; rect.style.left = (img.offsetLeft + x) +' px' Rect.style.top = (img.offsetTop + y) + 'px';};}

Result

Code description.

The tracking.ObjectTracker () method classifies the objects you want to track, and accepts an array as an argument.

The step size of the block specified by setStepSize ().

The object we are going to track is bound with a "track" event. As soon as the object is tracked, the tracking event will be triggered by the object we are tracking.

We get the data in the form of an array of objects with the width, height, x and y coordinates of each object (face, mouth and eyes).

Note: for browser security reasons, this program needs to run in the same domain or in a browser that disables web security.

About how the face detection method realized by JavaScript is shared here, I hope the above content can help you to some extent and learn more knowledge. If you think the article is good, you can share it for more people to see.