使用JavaScript 实现的人脸检测


Posted in Javascript onMarch 24, 2015

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

今天,我们开始学习tracking.js,它是一个由Eduardo Lundgren开发的轻量级的javascript库,它可以让你做实时的人脸检测,色彩追踪和标记好友的脸。在这个教程中,我们将会看到,我们如何从静态图片中检测脸,眼睛和嘴巴。
在教程的最后,你可以看到一个教程提供可以用的例子,这个例子有技巧和提示以及更多的技术细节。

首先,我们需要建立一个工程,从github中下载这个工程并且抽取build文件夹,根据你的文件和目录结构放置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文件夹里有我们从tracking.js中抽取的javascript文件。下面是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代码中,我们引入4个javascript来自于tracking.js的文件,这些文件有助于我们从图片中检测人脸、眼睛和嘴巴。现在我们写一段代码来实现从静态图片中检测人脸,眼睛和嘴巴。我故意选用这张图片,因为这张图片中有多张不同表情和姿势脸。

使用JavaScript 实现的人脸检测

为了达成目标,我们需要修改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>
// 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>

结果

使用JavaScript 实现的人脸检测

代码说明.
tracking.ObjectTracker() 方法对你想要进行跟踪的对象进行了分类,它可以接受一个数组作为参数.
setStepSize() 指定的块的步进大小.
我们将要跟踪的对象绑定上 “track” 事件, 对象一被跟踪,很快正在跟踪的对象就会触发跟踪事件.
我们以对象数组的形式中获取数据,里面有每个对象(脸部,嘴部很眼部)的宽度,高度 , x 和 y 坐标;
结果总结.
你可能会发现结果会根据形状的条件而有所不同, 还有地方需要改进和提高,而我们也承认并且真心认同对于这种类型的API的开发.
运行示例:
带有的图片的运行示例.
更多资源 – 基于 Javascript 的面部识别
https://github.com/auduno/headtrackr
https://github.com/auduno/clmtrackr

我们计划为 HTML5 的 Canvas 和摄像头视频的脸部跟踪以及图像标签做一个教程。你可能会用到我上面提到的客户端访问摄像头博客,它可以帮助你,用你知道的方式去访问用户的摄像头。
注意:由于浏览器安全性的原因,这个程序需要运行在一样的域或者禁用网络安全的浏览器中。

请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持!

Javascript 相关文章推荐
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
js中new一个对象的过程
Feb 20 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 #Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 #Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 #Javascript
JavaScript中textRange对象使用方法小结
Mar 24 #Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 #Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 #Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 #Javascript
You might like
PHP模板解析类实例
2015/07/09 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
smarty自定义函数用法示例
2016/05/20 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
详解如何修改python中字典的键和值
2020/09/29 Python
Python中return函数返回值实例用法
2020/11/19 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
党员个人党性分析材料
2014/12/18 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL