การทำ FACE DETECT โดยใช้ Jquery plugin

การทำ face detect นั้น เป็นการทำ image processing สามารถดึงรูปหน้าคนจากภาพถ่ายออกมา ซึ่งความแม่นยำนั้นขึ้นอยู่กับอัลกอริทึมของไลบารี่นั้น วันนี้จะมาสอนการทำโดยการใช้ plugin free ของ jquery กันครับ (มี sorce code download)

Face Detect ไลบารี่ นั้นมีหลายรูปแบบในสมัยนี้ ทั้งของ Microsoft , Google และ อื่นๆที่เป็น API สามารถเรียกใช้ได้ง่าย แต่ผมจะใช้ของ http://facedetection.jaysalvat.com/ เนื่องจากฟรีและไม่ต้องสมัครใส่ข้อมูลบัตรเครดิตอะไรแค่ Download มา include ได้เลย

เรามาดูตัวอย่าง ลองเลือกรูปดูครับ  (ไลบารีตัวนี้ความแม่นยำไม่ค่อยสูงเท่าไหร่ครับอาจมีผิดพลาดบ้าง 555 )

1 ในส่วนของ code  include ใน Project

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  //  ดึง jquery
<link rel="stylesheet" href="css/bootstrap.min.css" >//  ดึง bootstrap css
<link rel="stylesheet" href="css/bootstrap-theme.min.css" >  ดึง bootstrap theme
<script src="js/bootstrap.min.js"></script> <script src="js/jquery.facedetection.min.js"></script>  // library สำหรับ facedetect

2 ในส่วนของ UI ที่เป็น html

<div class="container" style="padding:25px;">  
 <div class="row">

  <h3>FACE DETECT</h3>
  <div class="form-group">
     <label for="sel1">เลือกรูป</label>
     <input class="form-control" id="imagebroswer" type="file">  // input สำหรับเลือกรูป
  </div>

 </div>
   
<div id="ximage" style="">
    <div class="row" >
      <div id="preview">
           <img id="dataface" src="face.jpg" > // รูปเริ่มต้น 
      </div>
      
      <div class="showimage" style="padding:25px 0;"></div>  // ส่วนแสดงรูปที่ face detect ได้
      
    </div>
  </div>
</div>

2 ในส่วนของ code js นั้นประกอบด้วย

$(document).ready(function(){
    
      createimage($("#dataface").attr("src"));   // เรียก face detect รูปแรก


    
function readURL(input) {   // อ่านไฟล์จาก client โดยไม่ผ่าน server
              
       
        if (input[0].value != "") {
            var reader = new FileReader();
            reader.onload = function (e) {
            createimage(e.target.result);}
            reader.readAsDataURL(input[0].files[0]);
          }
}
    
function createimage(result){                         // function สำรับ facedetect และ generate รูปหน้าลงบน .showimage
       
        var img = '<img id="dataface" src="'+result+'">';
        $("#preview").html(img).promise().done(function(){
        $("#dataface").faceDetection({
        complete: function (faces) {
             
            var htmlface = ''; 
                
            $.each(faces, function( i, value ) {
                
                var marg = 20;
  
                      
                var left   = (faces[i].x - marg),
                    top    = (faces[i].y - marg),
                    width  = (faces[i].width  + (marg * 2)),
                    height = (faces[i].height + (marg * 2));
                    
                    
                 var setleft =  left   * faces[i].scaleX + 'px';
                 var settop =    top    * faces[i].scaleY + 'px';
                 var setwidth =  width  * faces[i].scaleX + 'px';
                 var setheight =  height * faces[i].scaleY + 'px';    
                    
                    
             
              htmlface += '<div class="face" style="';
              htmlface += 'background-image: url('+result+');';
              htmlface += 'background-position: -'+left+'px -'+top+'px;';
              htmlface += 'left:'+setleft+';';
              htmlface += 'top:'+settop+';';
              htmlface += 'width:'+setwidth+';';
              htmlface += 'height:'+setheight+';';
              
              
              htmlface += '"></div>';
             
             
           });
             
             
              $(".showimage").html(htmlface);
             
        }
       });
  
   });
         
    }
    
   
    $( "#imagebroswer" ).change(function() {

                readURL($(this));

    });
   
});

SOURCE DOWNLOAD CLICK