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 原型学习总结
Oct 29 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python关于调用函数外的变量实例
2019/12/26 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
应届大学生自荐信
2013/12/05 职场文书
地震捐款倡议书
2014/08/29 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Python创建SQL数据库流程逐步讲解
2022/09/23 Python