2014年9月9日

初探trackingjs(一) - 臉部辨識

trackingjs是用JavaScript實作的計算機視覺(computer vision)函式庫。 trackingjs可以即時對瀏覽器中的圖片進行臉部辨識、顏色偵測...等處理。

本文直接以一個簡單的臉部辨識功能為範例。
首先至trackingjs的官方網站下載trackingjs,並解壓縮。
進行臉部辨識,需要使用以下幾個js檔案:
/build/tracking-min.js
/build/data/face-min.js
/build/data/eye-min.js
/build/data/mouth-min.js
建立tracker物件,並定義需要偵測的物件為:'face', 'eye', 'mouth'
var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
tracker.setStepSize(1.7);
接著,註冊一個callback函式,用以在偵測到物件時呼叫:
tracker.on('track', function(event) {
    event.data.forEach(function(rect) {
      //以下為偵測到的物件的位置及大小
      //console.log(rect.x, rect.y, rect.width, rect.height);
    });
});
然後,再輸入要trace的圖片物件。
有兩種方法可以取得圖片:
1.直接取得HTML DOM元件上的圖片
var img = document.getElementById('img');
2.由JavaScript建立圖片物件,並給定src以載入圖片
var img2 = new Image();
img2.src = "assets/faces.jpg"; 
最後,可以開始trace圖片了:
tracking.track(img, tracker);
然而,此處要特別注意的是,在執行tracking.track之前,請務必確認圖片已經載入(尤其是在JavaScript執行時才建立的圖片物件)。否則tracking會告訴你圖片寬度為0,無法偵測。
因此,可以善用img物件的onload函式,確保圖片已經載入,再執行track。
img2.onload = function() {
    tracking.track(img2, tracker);
}
以下是一個完整範例:
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - face hello world</title>
  <script src="../build/tracking-min.js"></script>
  <script src="../build/data/face-min.js"></script>
  <script src="../build/data/eye-min.js"></script>
  <script src="../build/data/mouth-min.js"></script>
  <style>
  .rect {
    border: 2px solid red;
    left: -1000px;
    position: absolute;
    top: -1000px;
  }
  #panel {
    width:954px;height:407px;background-image:url('assets/faces.png');
  }
  </style>
</head>
<body>
<div id="panel" class="demo-container"></div>
<script>
    window.onload = function() {    
      var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
      tracker.setStepSize(1.7);

      var img = new Image();
      img.src = "assets/faces.png";  
      img.onload = function() {
          tracking.track(img, tracker);
      };      

      tracker.on('track', function(event) {
        console.log(event);
        event.data.forEach(function(rect) {
          window.plot(rect.x, rect.y, rect.width, rect.height);
        });
      });

      var panel = document.getElementById('panel')
      window.plot = function(x, y, w, h) {
        var rect = document.createElement('div');
        document.querySelector('#panel').appendChild(rect);
        rect.classList.add('rect');
        rect.style.width = w + 'px';
        rect.style.height = h + 'px';
        rect.style.left = (panel.offsetLeft + x) + 'px';
        rect.style.top = (panel.offsetTop + y) + 'px';
      };
    };
  </script>
</body>
</html>
原圖:



 執行結果: