使用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 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 Javascript
js前端图片加载异常兜底方案
Jun 21 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中json_encode()和json_decode()
2014/05/25 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
python的pdb调试命令的命令整理及实例
2017/07/12 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
如何基于python实现不邻接植花
2020/05/01 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
python实现画图工具
2020/08/27 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
亲子活动总结
2014/04/26 职场文书
关爱留守儿童标语
2014/06/18 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
python单元测试之pytest的使用
2021/06/07 Python