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.

view demo

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. A immediate application I thought of was to use it to automatically crop faces from pictures to be used as profile photos.

Installation

Include jQuery and the plugin.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="path/to/dist/jquery.facedetection.min.js"></script>

Working of the code

Set a picture with some faces in your HTML page.

<img id="picture" src="img/face.jpg">

Apply the plugin to this image which will return the face coordinates.

<script>
    $('#picture').faceDetection({
        complete: function (faces) {
            console.log(faces);
        }
    });
</script>

The coordinate data is returned as an array of found face object:

x — X coord of the face in the picture
y — Y coord of the face in the picture
width — Width of the face
height — Height of the face
positionX — X position relative to the document
positionY — Y position relative to the document
offsetX — X position relative to the offset parent
offsetY — Y position relative to the offset parent
scaleX — Ratio between original image width and displayed width
scaleY — Ratio between original image height and displayed height
confidence — Level of confidence

Once we get the coordinates we can then process it as we require. In the demo example given we draw a border around the faces with the help of a little CSS.

$('#picture').faceDetection({
    complete: function (faces) {                        
        for (var i = 0; i < faces.length; i++) {
            $('<div>', {
                'class':'face',
                'css': {
                    'position': 'absolute',
                    'left':     faces[i].x * faces[i].scaleX + 'px',
                    'top':      faces[i].y * faces[i].scaleY + 'px',
                    'width':    faces[i].width  * faces[i].scaleX + 'px',
                    'height':   faces[i].height * faces[i].scaleY + 'px'
                }
            })
            .insertAfter(this);
        }
    },
    error:function (code, message) {
        alert('Error: ' + message);
    }
});
.face {
   position: absolute;
   border: 2px solid #FFF;
}

I tried it on various types of images – groups of people, individuals, portraits – and it got a detection success of around 92%. As you can see from the demo given, it fails to detect the second face from the left. Still, quite nice for such a small piece of Javascript as the image is not simple; 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.

Note: This is an updated article from a previous post.

9 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 *