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.

8 Responses



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


November 26th, 2010 at 8:38 pm

I used PNG and JPEGs and it worked fine.



November 27th, 2010 at 5:34 am

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


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


March 9th, 2011 at 9:11 am

The link for the code is given in the post:


It is free to use.



May 20th, 2011 at 1:55 am

Great script…



December 8th, 2014 at 3:38 am

sir, i got error message ..this image is not valid …,please give the information which type of image i needed.

can you also send me the script as soon as possible by which i can detect face

thank in advance


Anthony Avison

April 9th, 2015 at 2:30 am

You will get errors if you are cross domain linking images. JQuery can only access local files, you must make sure you’re using files on the same server as the script.

Your thoughts

Sign up for fresh content in your email