September 18, 2024
Hot News

Face Detection script in Jquery

admin05 mins
face-detection

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

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("
FACE DETECTED
");
                        that.remove();
                        for (var i = 0; i < faces.length; i++) {
                            $('
', {
                                '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 jquerytitle>
<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("
FACE DETECTED
");
                        that.remove();
                        for (var i = 0; i < faces.length; i++) {
                            $('
', {
                                '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>

Face detection script in jquery

Note: Wait 2-3 sec. after clicking button.

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

Leave a Reply

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

Related News

Top