javascript 人脸扣图 js检测人脸

转载

mob64ca14048514 2024-05-22 19:39:50

文章标签 javascript 人脸扣图 html HTML github 文章分类 JavaScript 前端开发

我一直都对提取和识别摄像头或者图片中人脸特征的技术理论很感兴趣。虽然我知道运用算法写一个人脸识别的软件或者插件超出了我的能力范围。但是我发现了一些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库文件。那么接下来我们就要实现从静态图像中对脸部整体、眼睛以及嘴巴的提取了。我有意选择了这张图片，因为这张图片中包含了很多表情、姿态不一的人脸。

javascript 人脸扣图 js检测人脸_HTML

为了能让它正常工作，我们修改一下之前的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>