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 hashtable 修正版 下载
Dec 30 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
javascript 设计模式之组合模式原理与应用详解
Apr 08 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计算两个文件相对路径的方法
2015/03/14 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
python去除所有html标签的方法
2015/05/05 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
python实现控制台输出彩色字体
2020/04/05 Python
Django中的AutoField字段使用
2020/05/18 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
活动倡议书范文
2014/05/13 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
学习保证书100字
2015/02/26 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
初中班主任教育随笔
2015/08/15 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA