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>

原圖：