使用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 相关文章推荐
js tab效果的实现代码
Dec 26 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php 正则匹配函数体
2009/08/25 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
validator验证控件使用代码
2010/11/23 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
Python中字典的setdefault()方法教程
2017/02/07 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
机关办公室岗位职责
2014/04/16 职场文书
社区禁毒工作方案
2014/06/02 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书