使用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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
javascritp实现input输入框相关限制用法
Jun 29 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
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
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
Python深入学习之装饰器
2014/08/31 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python 切换root 执行命令的方法
2019/01/19 Python
python matplotlib实现双Y轴的实例
2019/02/12 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
python连接mysql有哪些方法
2020/06/24 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
在职人员跳槽求职信
2015/03/20 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
六年级作文之自救
2019/12/19 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python