使用JavaScript 实现的人脸检测
我一直对视频和图片中的人脸标记、检测和人脸识别技术很感兴趣。尽管我知道获取逻辑和算法去开发人脸识别软件或者插件已经超出了我的想象。当我知道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的文件，这些文件有助于我们从图片中检测人脸、眼睛和嘴巴。现在我们写一段代码来实现从静态图片中检测人脸，眼睛和嘴巴。我故意选用这张图片，因为这张图片中有多张不同表情和姿势脸。
为了达成目标，我们需要修改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>
结果
代码说明.
tracking.ObjectTracker() 方法对你想要进行跟踪的对象进行了分类，它可以接受一个数组作为参数.
setStepSize() 指定的块的步进大小.
我们将要跟踪的对象绑定上 “track” 事件, 对象一被跟踪，很快正在跟踪的对象就会触发跟踪事件.
我们以对象数组的形式中获取数据，里面有每个对象（脸部，嘴部很眼部）的宽度，高度 , x 和 y 坐标;
结果总结.
你可能会发现结果会根据形状的条件而有所不同, 还有地方需要改进和提高，而我们也承认并且真心认同对于这种类型的API的开发.
运行示例:
带有的图片的运行示例.
更多资源 – 基于 Javascript 的面部识别
https://github.com/auduno/headtrackr
https://github.com/auduno/clmtrackr
我们计划为 HTML5 的 Canvas 和摄像头视频的脸部跟踪以及图像标签做一个教程。你可能会用到我上面提到的客户端访问摄像头博客，它可以帮助你，用你知道的方式去访问用户的摄像头。
注意：由于浏览器安全性的原因，这个程序需要运行在一样的域或者禁用网络安全的浏览器中。
请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持！
相关推荐
-
JavaScript检测上传文件大小的方法
本文实例讲述了JavaScript检测上传文件大小的方法.分享给大家供大家参考.具体如下: 通过JS客户端代码限制用户上传文件的大小,但是客户端的验证只是辅助的,服务器端一定还要再做验证 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http
-
javascript实现全角半角检测的方法
本文实例讲述了javascript实现全角半角检测的方法.分享给大家供大家参考.具体如下: //全角半角校验 function issbccase(strTmp) { for (var i=0; i<strTmp.length; i++) { if (strTmp.charCodeAt(i) > 128){ return true; break; } } return false; } 希望本文所述对大家的javascript程序设计有所帮助.
-
javascript 全角转换实现代码
下面我们来看下这个例子吧! 复制代码 代码如下: <html> <head> <title>jqueryDemo:quanjiaoNum</title> <script src="jquery.js" src="jquery.js" type="text/javascript"></script> <script
-
javascript实现全角与半角字符的转换
先上代码,再说废话^_^ 复制代码 代码如下: /** * 转全角字符 */ function toDBC(str){ var result = ""; var len = str.length; for(var i=0;i<len;i++) { var cCode = str.charCodeAt(i); //全角与半角相差(除空格外):65248(十进制) cCode = (cCode>
-
javascript检测两个数组是否相似
JS要比较两个数组是否有相同的元素,即两个数组所有元素都相同,但元素的顺序不一定一致.只就需要先将数组进行排序,再比较两个数组是否相等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org
-
asp(javascript)全角半角转换代码 dbc2sbc
asp全角半角转换函数 flag=-1时进行半角转全角 flag=0时进行半角全角互转 flag=1时进行全角转半角 复制代码 代码如下: <% Function DBC2SBC(Str, flag) Dim i, sStr If Len(Str)<= 0 Then Exit Function DBC2SBC = "" For i = 1 To Len(Str) sStr = Asc(Mid(Str, i, 1)) Select Case flag Case -1 If s
-
JavaScript 全角转半角部分
复制代码 代码如下: <script language=javascript> //全角空格为12288,半角空格为32 //其他字符半角(33-126)与全角(65281-65374)的对应关系是:均相差65248 //document.write((65281).toString(16)+"----"+(65374).toString(16)+"----"+(12288).toString(16)); String.prototype.dbc2sbc
-
使用JavaScript 实现的人脸检测
我一直对视频和图片中的人脸标记.检测和人脸识别技术很感兴趣.尽管我知道获取逻辑和算法去开发人脸识别软件或者插件已经超出了我的想象.当我知道Javascript库可以识别微笑,眼睛和脸部结构时,我得到启发去写一个教程.有许多的库,这些库要不就是纯粹的基于Javascript的,要不就是基于java语言的. 今天,我们开始学习tracking.js,它是一个由Eduardo Lundgren开发的轻量级的javascript库,它可以让你做实时的人脸检测,色彩追踪和标记好友的脸.在这个教程中,我们将
-
python中使用OpenCV进行人脸检测的例子
OpenCV的人脸检测功能在一般场合还是不错的.而ubuntu正好提供了python-opencv这个包,用它可以方便地实现人脸检测的代码. 写代码之前应该先安装python-opencv: 复制代码 代码如下: $ sudo apt-get install python-opencv 具体原理就不多说了,可以参考一下这篇文章.直接上源码. 复制代码 代码如下: #!/usr/bin/python# -*- coding: UTF-8 -*- # face_detect.py # Face De
-
python结合opencv实现人脸检测与跟踪
模式识别课上老师留了个实验,在VC++环境下利用OpenCV库编程实现人脸检测与跟踪. 然后就开始下载opencv和vs2012,再然后,配置了好几次还是配置不成功,这里不得不吐槽下微软,软件做这么大,这么难用真的好吗? 于是就尝试了一下使用python完成实验任务,大概过程就是这样子的: 首先,配置运行环境: 下载opencv和python的比较新的版本,推荐opencv2.4.X和python2.7.X. 直接去官网下载就ok了,python安装时一路next就行,下载的opencv.exe
-
JavaScript学习笔记之检测客户端类型是（引擎、浏览器、平台、操作系统、移动设备）
//取得用户代理字符串 并全部小写. var ua = navigator.userAgent.toLowerCase(); document.write(ua); 在上篇文章给大家介绍了基于javascript代码检测访问网页的浏览器呈现引擎.平台.Windows操作系统.移动设备和游戏系统 ,感兴趣的朋友可以点击全文了解详情. 1.识别呈现引擎 引擎主要包含四种:IE.Gecko.WebKit.Opera 2.识别浏览器 主流浏览器包含四种:IE.Chrome.Firefox.Opera 3
-
Android动态人脸检测的示例代码（脸数可调）
人脸检测 这里的人脸检测并非人脸识别,但是却可以识别出是否有人,当有人时候,你可以将帧图进行人脸识别(这里推荐Face++的sdk),当然我写的demo中没有加入人脸识别,有兴趣的朋友可以追加.face++ android自带的人脸检测 这里我们用到了人脸检测类为 FaceDetector.这个类提供了强大的人脸检测功能,可以方便我们进行人脸的侦测,因此我们使用他来进行动态的人脸检测,实现原理,其实也挺简单,主要是通过Carmen的回调PreviewCallback 在其中对帧图进行操作,并通过
-
Python+OpenCV人脸检测原理及示例详解
关于opencv OpenCV 是 Intel 开源计算机视觉库 (Computer Version) .它由一系列 C 函数和少量 C++ 类构成,实现了图像处理和计算机视觉方面的很多通用算法. OpenCV 拥有包括 300 多个 C 函数的跨平台的中.高层 API .它不依赖于其它的外部库 -- 尽管也可以使用某些外部库. OpenCV 对非商业应用和商业应用都是免费 的.同时 OpenCV 提供了对硬件的访问,可以直接访问摄像头,并且 opencv 还提供了一个简单的 GUI(graph
-
python利用OpenCV2实现人脸检测
最近,带领我的学生进行一个URTP项目设计,需要进行人脸识别.由于现在的OpenCV已经到了2.X版本,因此就不想用原来的1.X版本的代码,而网上存在的代码都是1.X版本的代码,尝试自己写一段2.X版本的代码,反复查阅资料,今天终于测试成功(很明显2.X版本的代码要比1.X的代码更简单),供大家好参考,代码如下:(2017年5月12日在python3.6.1下做一简单的修改) import cv2 import numpy as np cv2.namedWindow("test")#命
-
基于openCV实现人脸检测
openCV的人脸识别主要通过Haar分类器实现,当然,这是在已有训练数据的基础上.openCV安装在 opencv/opencv/sources/data/haarcascades_cuda(或haarcascades)中存在预先训练好的物体检测器(xml格式),包括正脸.侧脸.眼睛.微笑.上半身.下半身.全身等. openCV的的Haar分类器是一个监督分类器,首先对图像进行直方图均衡化并归一化到同样大小,然后标记里面是否包含要监测的物体.它首先由Paul Viola和Michael Jon
-
OpenCV实现人脸检测
前段日子,写了个人脸检测的小程序,可以检测标记图片.视频.摄像头中的人脸.效果还行吧,用的是opencv提供人脸库.至于具体的人脸检测原理,找资料去啃吧. 环境:VS2013+OPENCV2.4.10+Win8.1 一.基于对话框的MFC 首先,新建一个基于对话框的MFC应用程序,命名为myFaceDetect(取消"安全开发周期(SDL)检查"勾选,我自己习惯取消这个). 放置Button,设置Button的ID和Caption. 图片按钮--ID:IDC_FACEDETECT 视频
-
C++利用opencv实现人脸检测
小编所有的帖子都是基于unbuntu系统的,当然稍作修改同样试用于windows的,经过小编的绞尽脑汁,把刚刚发的那篇python 实现人脸和眼睛的检测的程序用C++ 实现了,当然,也参考了不少大神的博客,下面我们就一起来看看: Linux系统下安装opencv我就再啰嗦一次,防止有些人没有安装没调试出来喷小编的程序是个坑, sudo apt-get install libcv-dev sudo apt-get install libopencv-dev 看看你的usr/share/opencv