Face detection and photo tagging script with jQuery!

Today we are going to see how to create a Facebook like face detection and tagging with the help of jQuery.

To detect faces on the image I have used a popular face detection plugin developed by jaysalvat. You can download the jQuery plugin from the Github repository : download link 

The repository itself has an example which shows how to use this script, But I’m going to show you a little bit extra feature added with that amazing script, that is tagging photos.

But, this script is just an example showing how you can do the tagging functionality, I haven’t done the entire script like Facebook. So, you have to improve the script to achieve the entire tagging functionality.

Here is the JavaScript part:


The code is self explanatory, just read the comments to know what is happening in there. To understand this script you should be good at jQuery otherwise you may find it difficult.

Here is the HTML part:

This script doesn’t use any database or server side script to store the tags, this is just a demo of tagging using only jQuery. But the face detection script works only if you open using a server. It could be Apache or any other server.

Basically, if you see the HTML part, it has four DIVs and four images. Once the page loaded on the browser when you move your mouse on any of the photo, JavaScript calls the Face Detection script and within a few seconds it will detect the faces and shows white boxes around the faces.

To add a tag, you have click the white box around the face, a tag will be added at the side of the photo. If you hover on the tag the exact tagged face will be shown.

You can see the demo or download the code:

demo download

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *