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.



8 thoughts on “Face detection using jQuery

  1. 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

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

  3. 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

  4. 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.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>