jqueryface.html

<html>
    

<head>
    <style>
        .face{
          position: absolute;
          border: 2px solid #009900;
        }
        #detect{
          margin-left: 15%;
          cursor: pointer;
          cursor: hand;
        }
        </style>
<img src="https://www.sciencenews.org/sites/default/files/2017/06/main/articles/060117_LH_face-neuron_main.jpg" class="pic" width="50%">
<h2 id="detect">Detect Face</h2>

</head>

<body>
   
    <script type="text/javascript" src="<script type="text/javascript" src="C:/Users/mk/Desktop/test/jq.js"></script>"></script>
    <script type="text/javascript" src="C:/Users/mk/Desktop/test/f.js">
    $("#detect").click(function(){
  alert("Detecting Face ..............");
  $(".pic").faceDetection({
    complete:function(faces){
      alert("Detection Complete");
      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>

</body>


</html>