我一直都對提取和識別攝像頭或者圖片中人臉特徵的技術理論很感興趣。雖然我知道運用演算法寫一個人臉識別的軟體或者外掛超出了我的能力範圍。但是我發現了一些JavaScript庫，可以用來識別人臉的五官結構，於是我就想寫關於這些庫的一個入門教程。其實有很多相關的人臉識別庫，有的是純用JavaScript，有的是夾雜了java，它們各有優缺點。
今天我們想要了解一下tracking.js這個庫，這是一個是由Eduardo Lundgren開發的輕量級JavaScrip庫，它能實現實時的人臉特徵提取、顏色追蹤以及標定朋友。在這個教程裡，我們將會學習怎麼用它從靜態圖片中提取整個臉部、眼睛以及嘴巴。
在教程的最後，你會找到一個有更詳細的使用技巧和技術細節的實現示例。
首先，我們需要建立我們的專案，你可以從github下載到我們要使用的庫（tracking.js），然後把它的build檔案中的內容放在你的工作檔案目錄下。在這個教程裡，我的檔案結構如下：
檔案結構
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Project Folder │ │ index.html │ ├───assets │ face.jpg │ └───js │ tracking-min.js │ tracking.js │ └───data eye-min.js eye.js face-min.js face.js mouth-min.js mouth.js |
你可以看到，js這個檔案目錄就包含了我們從github下載的tracking.js中的build資料夾裡的內容。那麼，接下來我就給你看一下index.html中的HTML程式碼。
HTML程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>@tuts Face Detection Tutorial</title> <script src="js/tracking-min.js"></script> <script src="js/data/face-min.js"></script> <script src="js/data/eye-min.js"></script> <script src="js/data/mouth-min.js"></script> <style> .rect { border: 2px solid #a64ceb; left: -1000px; position: absolute; top: -1000px; } #img { position: absolute; top: 50%; left: 50%; margin: -173px 0 0 -300px; } </style> </head> <body> <div class="imgContainer"> <img id="img" src="assets/face.jpg" /> </div> </body> </html> |
在上面的HTML程式碼中，我們引入了四個tracking.js庫檔案。那麼接下來我們就要實現從靜態影象中對臉部整體、眼睛以及嘴巴的提取了。我有意選擇了這張圖片，因為這張圖片中包含了很多表情、姿態不一的人臉。
為了能讓它正常工作，我們修改一下之前的HTML檔案中的head部分程式碼。
HTML程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>@tuts Face Detection Tutorial</title> <script src="js/tracking-min.js"></script> <script src="js/data/face-min.js"></script> <script src="js/data/eye-min.js"></script> <script src="js/data/mouth-min.js"></script> <style> .rect { border: 2px solid #a64ceb; left: -1000px; position: absolute; top: -1000px; } #img { position: absolute; top: 50%; left: 50%; margin: -173px 0 0 -300px; } </style> // tracking code. <script> window.onload = function() { var img = document.getElementById('img'); var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']); // Based on parameter it will return an array. tracker.setStepSize(1.7); tracking.track('#img', tracker); tracker.on('track', function(event) { event.data.forEach(function(rect) { draw(rect.x, rect.y, rect.width, rect.height); }); }); function draw(x, y, w, h) { var rect = document.createElement('div'); document.querySelector('.imgContainer').appendChild(rect); rect.classList.add('rect'); rect.style.width = w + 'px'; rect.style.height = h + 'px'; rect.style.left = (img.offsetLeft + x) + 'px'; rect.style.top = (img.offsetTop + y) + 'px'; }; }; </script> </head> <body> <div class="imgContainer"> <img id="img" src="assets/face.jpg" /> </div> </body> </html> |
結果
程式碼解釋
- tracking.ObjectTracker()接受陣列引數將你想要標記的物件分類（比如臉部整體、眼睛、鼻子、嘴巴等）。
- setStepSize()規定用來標記的方框的步長。
- 我們把要標記的物件和
track事件進行繫結，一旦我們要標記的物件完成初始化，就會觸發track事件。 - 資料（Data）儲存在物件陣列列表中，其中的值是每一個標記物件的
長、寬以及x、y座標。
結論
正如你所看到的，結果可能因為人臉形狀不同而有所變化。雖然還需要改進，但是我們很感謝對做出這些工作和API介面的所付出的努力。