In this tutorial i am going to show you how to detect face on image. jaysalvat has created wonderful jquery based library to detect faces, So i am going to use that library.

This is something like facebook detect faces when ever you upload photo. So that you can easily tag that photo to your friends and family.
face-detection

DEMO DOWNLOAD

Create a simple html page and call photo by IMG tag and apply some css.

index.html

<style> 
body {
	margin:0 0 0 0;
}   
.face {
     position: absolute;
     border: 2px solid #009900;
}
</style>
 
<img src="img/img3.jpg" class="pic" width="50%" style="border:5px solid;" >
 
<h3><input type='button' value='CLICK HERE TO DETECT FACE' id="detect" style="height:60px;cursor: pointer; color:green; font-weight:bold;" ></button></h3>
<b style="color:red">Note:</b> Wait 2-3 sec. after clicking button.

Note facedetection library dependent on jquery core library, So you first need to add jquery library after that add facedetection library to make it work.



<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.facedetection.min.js"></script>




Now finally call faceDetection function on button click, You can call this function on any event as per your need.

<script>
$(function() {
$("#detect").click(function() {
	var that = $(this);
  $('.pic').faceDetection({
                    complete: function (faces) {
                        that.after("<h3>FACE DETECTED</h3>");
                        that.remove();
                        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);
                    }
                });
});	   
});
</script>

After that your final index.html file will be..

index.html

<title>Face detection script in jquery</title>
<style> 
body {
	margin:0 0 0 0;
}   
.face {
     position: absolute;
     border: 2px solid #009900;
}
    </style>
 
<img src="img/img3.jpg" class="pic" width="50%" style="border:5px solid;" >
 
<h3><input type='button' value='CLICK HERE TO DETECT FACE' id="detect" style="height:60px;cursor: pointer; color:green; font-weight:bold;" ></button></h3>
<b style="color:red">Note:</b> Wait 2-3 sec. after clicking button. 
 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.facedetection.min.js"></script> 
<script>
$(function() {
$("#detect").click(function() {
	var that = $(this);
  $('.pic').faceDetection({
                    complete: function (faces) {
                        that.after("<h3>FACE DETECTED</h3>");
                        that.remove();
                        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);
                    }
                });
});	   
});
</script>

DEMO DOWNLOAD

If you like this post please don’t forget to subscribe my public note book for more useful stuff