基于Javascript的人脸探测技术

本帖最后由 pig2 于 2015-2-24 21:53 编辑

问题导读

1.人脸识别，Javascript需要哪些库？
2.tracking.ObjectTracker()的作用是什么？

我一直都对提取和识别摄像头或者图片中人脸特征的技术理论很感兴趣。虽然我知道运用算法写一个人脸识别的软件或者插件超出了我的能力范围。但是我发现了一些JavaScript库，可以用来识别人脸的五官结构，于是我就想写关于这些库的一个入门教程。其实有很多相关的人脸识别库，有的是纯用JavaScript，有的是夹杂了java，它们各有优缺点。

今天我们想要了解一下tracking.js这个库，这是一个是由Eduardo Lundgren开发的轻量级JavaScrip库，它能实现实时的人脸特征提取、颜色追踪以及标定朋友。在这个教程里，我们将会学习怎么用它从静态图片中提取整个脸部、眼睛以及嘴巴。

在教程的最后，你会找到一个有更详细的使用技巧和技术细节的实现示例。

首先，我们需要建立我们的项目，你可以从github下载到我们要使用的库（tracking.js），然后把它的build文件中的内容放在你的工作文件目录下。在这个教程里，我的文件结构如下：

文件结构
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代码

<!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部分代码。

<!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>
复制代码