Face Detection script in Jquery

Are you looking for jquery face detection plugin which detect persons face on, then you search end here i found awesome jQuery plugin which you can easily integrate on your website to detect face on image this is very useful while making photo tagging system like facebook which auto detect your friend faces on photo and you could easily tag them.

face-detection

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