使用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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
一段实现页面上的图片延时加载的js代码
Feb 11 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
layui实现文件或图片上传记录
Aug 28 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 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 array操作10个小技巧分享
2011/06/23 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
php实现的递归提成方案实例
2015/11/14 PHP
php中static和const关键字用法分析
2016/12/07 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
基于jquery的表格排序
2010/09/11 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
详解python中的 is 操作符
2017/12/26 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python3 re返回形式总结
2020/11/20 Python
python Pexpect模块的使用
2020/12/25 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
八年级历史教学反思
2014/01/10 职场文书
开学典礼演讲稿
2014/05/23 职场文书
安全口号大全
2014/06/21 职场文书
单位综合评价意见
2015/06/05 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书