使用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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
xml转json的js代码
Aug 28 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
JS跨域问题详解
Nov 25 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
基于mysql的bbs设计(二)
2006/10/09 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
轻松掌握python设计模式之访问者模式
2016/11/18 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
详解Python yaml模块
2020/09/23 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
网络工程师的自我评价
2013/10/02 职场文书
校园环保建议书
2014/05/14 职场文书
产品售后服务承诺书
2014/05/21 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
小学家长通知书评语
2014/12/31 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
Python基础之变量的相关知识总结
2021/06/23 Python
PyTorch中permute的使用方法
2022/04/26 Python
Java实现注册登录跳转
2022/06/16 Java/Android