JavaScript人脸检测的实现方法

时间 2019-12-08

原文原文链接

今天，咱们开始学习tracking.js,它是一个由Eduardo Lundgren开发的轻量级的javascript库，它可让你作实时的人脸检测，色彩追踪和标记好友的脸。在这个教程中，咱们将会看到，咱们如何从静态图片中检测脸，眼睛和嘴巴。javascript

我一直对视频和图片中的人脸标记、检测和人脸识别技术很感兴趣。尽管我知道获取逻辑和算法去开发人脸识别软件或者插件已经超出了个人想象。当我知道Javascript库能够识别微笑，眼睛和脸部结构时，我获得启发去写一个教程。有许多的库，这些库要不就是纯粹的基于Javascript的，要不就是基于java语言的。css

今天，咱们开始学习tracking.js,它是一个由Eduardo Lundgren开发的轻量级的javascript库，它可让你作实时的人脸检测，色彩追踪和标记好友的脸。在这个教程中，咱们将会看到，咱们如何从静态图片中检测脸，眼睛和嘴巴。html

在教程的最后，你能够看到一个教程提供能够用的例子，这个例子有技巧和提示以及更多的技术细节。前端

首先，咱们须要创建一个工程，从github中下载这个工程而且抽取build文件夹，根据你的文件和目录结构放置build文件夹。在这个教程里，我用了以下的文件和目录结构。vue

文件夹结构java

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文件夹里有咱们从tracking.js中抽取的javascript文件。下面是index.html的html代码。node

HTML代码webpack

<!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;  
  }     //在此我向你们推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提高思惟能力

  #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代码中，咱们引入4个javascript来自于tracking.js的文件，这些文件有助于咱们从图片中检测人脸、眼睛和嘴巴。如今咱们写一段代码来实现从静态图片中检测人脸，眼睛和嘴巴。我故意选用这张图片，由于这张图片中有多张不一样表情和姿式脸。git

本次给你们推荐一个免费的学习圈，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。获取资料👈👈👈 对web开发技术感兴趣的同窗，：👉👉👉加入 👈👈👈，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。github

为了达成目标，咱们须要修改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;  
  }                //在此我向你们推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提高思惟能力

  #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';  
      };              //在此我向你们推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提高思惟能力
    }; </script> 

</head> 
<body> 
<div class="imgContainer"> 
  <img id="img" src="assets/face.jpg" /> 
</div> 

</body> 
</html>
复制代码

结果

代码说明.

tracking.ObjectTracker() 方法对你想要进行跟踪的对象进行了分类，它能够接受一个数组做为参数.
setStepSize() 指定的块的步进大小.
咱们将要跟踪的对象绑定上 “track” 事件, 对象一被跟踪，很快正在跟踪的对象就会触发跟踪事件.
咱们以对象数组的形式中获取数据，里面有每一个对象（脸部，嘴部很眼部）的宽度，高度 , x 和 y 坐标;

结果总结. 你可能会发现结果会根据形状的条件而有所不一样, 还有地方须要改进和提升，而咱们也认可而且真心认同对于这种类型的API的开发.