我一直都对提取和识别摄像头或者图片中人脸特征的技术理论很感兴趣。虽然我知道运用算法写一个人脸识别的软件或者插件超出了我的能力范围。但是我发现了一些JavaScript库，可以用来识别人脸的五官结构，于是我就想写关于这些库的一个入门教程。其实有很多相关的人脸识别库，有的是纯用JavaScript，有的是夹杂了java，它们各有优缺点。
tracking.js这个库，这是一个是由Eduardo Lundgren开发的轻量级JavaScrip库，它能实现实时的人脸特征提取、颜色追踪以及标定朋友。在这个教程里，我们将会学习怎么用它从静态图片中提取整个脸部、眼睛以及嘴巴。
在教程的最后，你会找到一个有更详细的使用技巧和技术细节的实现示例。
首先，我们需要建立我们的项目，你可以从github下载到我们要使用的库（tracking.js），然后把它的build文件中的内容放在你的工作文件目录下。在这个教程里，我的文件结构如下：
文件结构
JavaScript
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代码
XHTML
<!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>
tracking.js库文件。那么接下来我们就要实现从静态图像中对脸部整体、眼睛以及嘴巴的提取了。我有意选择了这张图片，因为这张图片中包含了很多表情、姿态不一的人脸。
为了能让它正常工作，我们修改一下之前的HTML文件中的head部分代码。
HTML代码
XHTML
<!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接口的所付出的努力。
更多资源：
- https://github.com/auduno/headtrackr
- https://github.com/auduno/clmtrackr