Hello people. All right with you?
In today’s post I teach you a really cool technique to do face recognition in images using jquery and the facedetection plugin . For the dinosaurs that used orkut, they know what I’m talking about. The social network provided (I don’t know if it still does) in users’ photos the possibility of marking the people photographed according to facial recognition.
Good. So come on. Hands on!To begin, let’s organize our file and directory structure as follows:
- img
- foto.jpg
- js
- ccv.js
- detect.js
- face.js
- jquery.js
- jquery.facedetection.js
- index.html
Inside the img folder we put any photo (with good resolution) and that obviously has a well focused face. In the js folder we put the files for facedetection , jquery and the file where we will make the magic happen (which is detect.js ).
Starting with the implementation of the index.html file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <title>Face Detection</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/face.js" ></script> <script type="text/javascript" src="js/ccv.js" ></script> <script type="text/javascript" src="js/jquery.facedetection.js" ></script> <script type="text/javascript" src="js/detectar.js" ></script> <style> .face{ border: 1px solid #fff; } </style> </head> <body> <div id="content"> <a href="#" id="detect">Detect faces</a> <br /> <img src="img/foto.jpg" /> </div> </body> </html> |
From lines 6 to 10 we import all the js files that we will use. In line 12 I put a css rule to style the frame that will focus the face in the photo. Then I create a div called content inside the body tag and inside it I put a link and the image to be analyzed. The face detection process will occur just when the link is triggered (hence the importance of defining an id for it).
Now let’s implement the function in the detect.js file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | $(function() { $('#detect').click(function() { var $this = $(this); var coords = $('img').faceDetection({ complete:function() { $this.text('Face founded!'); }, error:function(img, code, message) { $this.text('error!'); alert('Error: '+message); } }); for (var i = 0; i < coords.length; i++) { $('<div>', { 'class':'face', 'css': { 'position': 'absolute', 'left': coords[i].positionX +'px', 'top': coords[i].positionY +'px', 'width': coords[i].width +'px', 'height': coords[i].height +'px' } }) .appendTo('#content'); } }); return false; }); |
By executing the faceDetection function (line 5) it stores the points that configure the face found in the variable coords . Within the function call, actions for success and error are also defined .
Then, according to the coordinates found, a div called face is created inside the #content that surrounds the person’s face in the photo.
And end !!!
To see the results of this experiment, click here . To download the files used in the explanation, click here.
Feel free to test with more photos.
Visit the official plugin page: http://facedetection.jaysalvat.com/
Rafael Wendel Pinheiro
Holds a university degree in Information Systems, a postgraduate degree in Database Systems and a master's degree in Education with a focus on Sociocommunity Technologies. He works as a professor of technical and technological education at the Federal Institute of Education, Science and Technology of São Paulo, teaching subjects in the areas of programming, database, project development and software engineering.
