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 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
Vue循环中多个input绑定指定v-model实例
Aug 31 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
php的扩展写法总结
2019/05/14 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
django 创建过滤器的实例详解
2017/08/14 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
没编程基础可以学python吗
2020/06/17 Python
python代码实现猜拳小游戏
2020/11/30 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
写求职信有什么意义
2014/02/17 职场文书
我的老师教学反思
2014/05/01 职场文书
物业接待员岗位职责
2015/04/15 职场文书
公司放假通知怎么写
2015/04/15 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python