Monday, May 18, 2015

Home » JQuery » Detect faces in Pictures (Facebook Style) using JQuery

Detect faces in Pictures (Facebook Style) using JQuery

I was working on a project of recent where I need to detect human faces on pictures then after lot of googleing I came across this JQuery script for detecting face on images, Face detection was made popular by facebook when this was implemented people don't utilize it much but now developer can use it as a means of improving user experience on their web applications. We are going to Use the Face detection script below to read the image bit by bit and use CSS to box out the faces that are detected on the images, Don’t worry you can always download the source code of this tutorial for better understanding on how it works.

First we are going to give our image id of Image using JQuery CSS function class will be added to the detected faces and also the button that we are going to use for the face detection is going to have id of detect :

        $(function () {
            "use strict";

            $('#detect').click(function (e) {
                e.preventDefault();

                $('.face').remove();

                $('#image').faceDetection({
                    complete: function (faces) {
                        console.log(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);
                    }
                });
            });
        });

And here is the HTML code for the demo page :

<a href=""><h2>Facebook Style Face Detection using JQuery - codingSavvy.com</h2></a>
   <img id="image" src="3.jpg" />
<button class="btn" id="detect" >Detect Faces!</button>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="jquery.facedetection.js"></script>

You can download the source code HERE or view Demo Here. Comments are welcome.

Was this article helpful?

☺Yes, thanks!

☹Not really

Thanks! Your feedback helps us improve tutorials.