JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js


Posted in Javascript onSeptember 14, 2015

我一直对人工智能识别技术非常感兴趣,因为我无法想象这究竟是一种什么样的算法,什么样的分析过程。无论是声音识别、人脸识别或其它种识别,人们的外貌、说话的方式都是如此不同,一种图片你可以用不同的方式、从不同的角度拍摄,我不能理解这些识别技术是如何做到的。有个叫做“面具”的游戏也使用了这种识别技术,我想对于脸部识别技术也应该研究一下。Facebook使用了这种技术,在手势控制中也能用到它,所以,你网站上也会有应用的地方。

我找到的一个可以用于人脸识别的JavaScript程序包是Face Detection,它是由Jay Salvat和Liu Liu开发的。它是一个标准的jQuery插件,通过对提供的图片进行分析,返回所有找到的脸部图像的坐标。下面我们来看看它是如何使用的!

jQuery.faceDetection

使用Face Detection这个jQuery plugin,你需要引入四个js文件:

<script src="jquery-1.4.3.min.js"></script>
<!-- mas js -->
<script src="facedetection/ccv.js"></script>
<script src="facedetection/face.js"></script>
<script src="jquery.facedetection.js"></script>

这个脸部识别插件的头两个文件里是它的各种功能性程序,通过它们能得到一个数组对象,这些对象里存储的就是图片里的脸部坐标信息。下面是一个例子:

var coords = jQuery("#myImage").faceDetection();
/* 返回:
 {
 x: 525
 y: 435,
 width: 144,
 height: 144,
 positionX: 532.6353328125226,
 positionY: 443.240976080536,
 offsetX: 532.6353328125226,
 offsetY: 443.240976080536,
 confidence: 12.93120119,
 neighbour: undefined,
 }
*/

你还可以在检测方法上加入事件回调函数:

var coords = jQuery("#myImage").faceDetection({
 complete: function(image, coords) {
 // Do something
 },
 error: function() {
 console.warn("无法分析图片");
 }
});

对于识别出的脸部信息,你可以做任何的处理东西。你可以在图片中脸部的位置画出框线:

jQuery("img").each(function() {
 var img = this;
 // 获取脸部坐标
 var coordinates = jQuery(img).faceDetection();
 // 在脸上画出框线
 if(coordinates.length) {
 coordinates.forEach(function(coord) {
 jQuery("<div>", {
 css: {
 position: "absolute",
 left: coord.positionX + 5 + "px",
 top: coord.positionY + 5 + "px",
 width: coord.width + "px",
 height: coord.height + "px",
 border: "3px solid white"
 }
 }).appendTo(img.parentNode);
 });
 }
});

这很简单,当然你可以做复杂的处理,比如说提取出来。

我用了各种图片进行脸部识别尝试,正如我预想到的,结果并不是很完美。但不管怎样,还是相当不错的。这是一个很简单的脚本技术,而且没有任何技术是十全十美的。这个脸部识别插件并不具有脸部比较功能,你需要用其它方法并提供面部特征信息实现此功能。总之,相当不错,强烈建议你试一下。

脸部识别JavaScript类库Tracking.js

对Web开发者而言,开源的JavaScript库Tracking.js正在使计算机视觉和增强现实技术变得简单, 使用它可以展示效果类似Kinect或者Wii的体感应用,且该JavaScript库体积小 (~7k),非常轻量级,且接口简洁。

Tracking.js 能够在移动Web应用、桌面应用中工作,甚至可以和基于Node.js的服务器进行配对。 它会给浏览器带来计算机图形学算法和技术,其拥有功能:脸部识别(某个特定的颜色时或人物/脸庞/身体出现移动的时候)、实时色彩跟踪。对于Web开发而言,以前需要通过C或C++的技术才能实现类似效果。而现在Traking.js提供了一个Web组件,因此Web前端开发人员可以访问HTML标签组件来实现类似功能,而无需了解JavaScript,这极大的简化了Web开发。

Tracking.js包括一个色彩跟踪算法和对象跟踪组件,它能使Web浏览器识别脸部及眼睛的变化。例如,Web前端还可以对于用这个功能来设置用户头像,对一些网站而言,这也是个很炫的功能;同时对跟踪的脸部数据和后台数据库进行匹配,从而和反馈给用户更多有用的数据。

目前,在GitHub上Tracking.js源码工程已经被Fork了200次以上,8月份上旬,该JS库已经升级为1.0版本。

以上内容就是给大家分享的JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js,希望大家喜欢。

Javascript 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
浅析javascript函数表达式
Feb 10 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 #Javascript
详解JavaScript中的4种类型识别方法
Sep 14 #Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 #Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 #Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 #Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 #Javascript
JS动态添加iframe的代码
Sep 14 #Javascript
You might like
php unset全局变量运用问题的深入解析
2013/06/17 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
浅谈Python爬取网页的编码处理
2016/11/04 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python3+Appium安装使用教程
2019/07/05 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python的logging模块基本用法
2020/12/24 Python
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
AJAX的全称是什么
2012/11/06 面试题
应届生个人求职信模板
2013/11/26 职场文书
班级文化标语
2014/06/23 职场文书
保密工作目标责任书
2014/07/28 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
答谢词范文
2015/01/05 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
百年校庆感言
2015/08/01 职场文书
单位提档介绍信
2015/10/22 职场文书
react中的DOM操作实现
2021/06/30 Javascript