源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2018-12-25 05:15:17 | 显示全部楼层 |阅读模式
人脸识别的JavaScript程序包是Face Detection,它是由Jay Salvat和Liu Liu开发的。它是一个标准的jQuery插件,通过对提供的图片进行分析,返回所有找到的脸部图像的坐标,感兴趣的朋友跟着小编一起学习js人脸识别技术及脸部识别JavaScript类库Tracking.js吧

我一直对人工智能识别技术非常感兴趣,因为我无法想象这究竟是一种什么样的算法,什么样的分析过程。无论是声音识别、人脸识别或其它种识别,人们的外貌、说话的方式都是如此不同,一种图片你可以用不同的方式、从不同的角度拍摄,我不能理解这些识别技术是如何做到的。有个叫做“面具”的游戏也使用了这种识别技术,我想对于脸部识别技术也应该研究一下。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,希望大家喜欢。

回复

使用道具 举报

7

主题

2万

回帖

288

积分

中级会员

Rank: 3Rank: 3

积分
288
发表于 2022-9-7 15:41:21 | 显示全部楼层
逛逛看看瞧瞧
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-12-28 12:17:18 | 显示全部楼层
来看看!!!
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-3-14 20:41:21 | 显示全部楼层
感谢楼主分享
回复 支持 反对

使用道具 举报

12

主题

2万

回帖

431

积分

中级会员

Rank: 3Rank: 3

积分
431
发表于 2023-10-18 02:36:02 | 显示全部楼层
需要很久了终于找到了
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

93

积分

注册会员

Rank: 2

积分
93
发表于 2023-10-24 04:07:10 | 显示全部楼层
看到这帖子真是高兴!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-2-25 18:58:06 | 显示全部楼层
啦啦啦啦啦啦哈哈哈
回复 支持 反对

使用道具 举报

11

主题

2万

回帖

300

积分

中级会员

Rank: 3Rank: 3

积分
300
发表于 2024-3-2 03:44:53 | 显示全部楼层
看看看咋么
回复 支持 反对

使用道具 举报

15

主题

2万

回帖

122

积分

注册会员

Rank: 2

积分
122
发表于 2024-4-10 01:26:12 | 显示全部楼层
额风风风微风微风违法
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

156

积分

注册会员

Rank: 2

积分
156
发表于 2024-5-31 22:42:40 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-1-19 02:42 , Processed in 0.164783 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表