Face detection using jQuery


Face detection is a common feature in most digital cameras today; the white or red square that pops around someones face when we are focusing the camera on that person. Face detection algorithms enables the software to pinpoint the locations and sizes of human faces in digital images, whatever the surrounding objects may be.

Face-Detection is a jQuery plugin that enables you to detect human faces in images. Besides the crucial algorithm that does the main work it uses HTML5 Canvas element to grab the image data. This means that the plugin only works on browsers that support the HTML5 Canvas element. A immediate application I thought of was to use it to automatically crop faces from pictures to be used as profile photos.

view demo

I tried it on various types of images – groups of people, individuals, portraits – and it got a detection success of around 85%. As you can see from the demo given, it fails to detect the face on the extreme right. Still, quite nice for such a small piece of Javascript; with some more tweaks to the detection code by the author, the accuracy will get better over time and we can think of more browser applications of these concepts.

This site is a digital habitat of Sameer Borate, a freelance web developer working in PHP, MySQL and WordPress. I also provide web scraping services, website design and development and integration of various Open Source API's. Contact me at metapix[at]gmail.com for any new project requirements and price quotes.

6 Responses

1

Sze

November 26th, 2010 at 2:26 pm

Using Safari’s Web Inspector to swap the Image URL with one of my own, I get an Error message “Error: This image is not valid” What type of images are valid? By the way, I used a JPG image

sameer

November 26th, 2010 at 8:38 pm

I used PNG and JPEGs and it worked fine.

3

piramu

November 27th, 2010 at 5:34 am

Please update ur query as one guy face is not marked in the demo…

4

Ishwinder Singh

March 9th, 2011 at 5:41 am

Hi.. where I can find code for face detection? do I need to pay for this code?? pls tell fast.. thanks in advance

sameer

March 9th, 2011 at 9:11 am

The link for the code is given in the post:

https://github.com/jaysalvat/jquery.facedetection

It is free to use.

6

Gaurav

May 20th, 2011 at 1:55 am

Great script…

Your thoughts