微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

基于Javascript的人脸探测技术

2015-02-21 18:07 前端大全
点击上方蓝字↑↑↑,轻松关注哦~

我一直都对提取和识别摄像头或者图片中人脸特征的技术理论很感兴趣。虽然我知道运用算法写一个人脸识别的软件或者插件超出了我的能力范围。但是我发现了一些JavaScript库,可以用来识别人脸的五官结构,于是我就想写关于这些库的一个入门教程。其实有很多相关的人脸识别库,有的是纯用JavaScript,有的是夹杂了java,它们各有优缺点。


今天我们想要了解一下tracking.js这个库,这是一个是由Eduardo Lundgren开发的轻量级JavaScrip库,它能实现实时的人脸特征提取、颜色追踪以及标定朋友。在这个教程里,我们将会学习怎么用它从静态图片中提取整个脸部、眼睛以及嘴巴。


在教程的最后,你会找到一个有更详细的使用技巧和技术细节的实现示例。


首先,我们需要建立我们的项目,你可以从github下载到我们要使用的库(tracking.js),然后把它的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这个文件目录就包含了我们从github下载的tracking.js中的build文件夹里的内容。那么,接下来我就给你看一下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代码中,我们引入了四个tracking.js库文件。那么接下来我们就要实现从静态图像中对脸部整体、眼睛以及嘴巴的提取了。我有意选择了这张图片,因为这张图片中包含了很多表情、姿态不一的人脸。




为了能让它正常工作,我们修改一下之前的HTML文件中的head部分代码。


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事件进行绑定,一旦我们要标记的对象完成初始化,就会触发track事件。

  • 数据(Data)保存在对象数组列表中,其中的值是每一个标记对象的长、宽以及x、y坐标。


结论


正如你所看到的,结果可能因为人脸形状不同而有所变化。虽然还需要改进,但是我们很感谢对做出这些工作和API接口的所付出的努力。


更多资源:


  • https://github.com/auduno/headtrackr

  • https://github.com/auduno/clmtrackr



原文出处:www.attuts.com

译文出处:伯乐在线 - maple



/////////////////


1. 『前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯,欢迎关注。微信号:FrontDev

(长按二维码↑↑↑自动可扫描)

http://web.jobbole.com/all-posts/

2. 点击“阅读原文”,查看更多前端文章。


 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 伪“学生成绩单”代理人木马,你中招了吗? 喜大普奔,PHP7正式发布! 从「王宝强事件」学人生经验 技术大会值得参加吗? 画气泡图的十二个图表库