我一直对人工智能识别技术非常感兴趣,因为我无法想象这究竟是一种什么样的算法,什么样的分析过程。无论是声音识别、人脸识别或其它种识别,人们的外貌、说话的方式都是如此不同,一种图片你可以用不同的方式、从不同的角度拍摄,我不能理解这些识别技术是如何做到的。因为之前已经介绍了JavaScript裸体识别技术,还有个叫做“面具”的游戏也使用了这种识别技术,我想对于脸部识别技术也应该研究一下。Facebook使用了这种技术,在手势控制中也能用到它,所以,你网站上也会有应用的地方。
我找到的一个可以用于人脸识别的JavaScript程序包是Face Detection,它是由Jay Salvat和Liu Liu开发的。它是一个标准的jQuery插件,通过对提供的图片进行分析,返回所有找到的脸部图像的坐标。下面我们来看看它是如何使用的!
观看演示:http://www.webhek.com/demo/face-detection/
jQuery.faceDetection
使用Face Detection这个jQuery plugin,你需要引入四个js文件:
Javascript代码
<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>
这个脸部识别插件的头两个文件里是它的各种功能性程序,通过它们能得到一个数组对象,这些对象里存储的就是图片里的脸部坐标信息。下面是一个例子:
Javascript代码
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,
}
*/
你还可以在检测方法上加入事件回调函数:
Javascript代码
var coords = jQuery("#myImage").faceDetection({
complete: function(image, coords) {
// Do something
},
error: function() {
console.warn("无法分析图片");
}
});
对于识别出的脸部信息,你可以做任何的处理东西。你可以在图片中脸部的位置画出框线:
Javascript代码
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);
});
}
});
这很简单,当然你可以做复杂的处理,比如说提取出来。
观看演示:http://www.webhek.com/demo/face-detection/
我用了各种图片进行脸部识别尝试,正如我预想到的,结果并不是很完美。但不管怎样,还是相当不错的。这是一个很简单的脚本技术,而且没有任何技术是十全十美的。这个脸部识别插件并不具有脸部比较功能,你需要用其它方法并提供面部特征信息实现此功能。总之,相当不错,强烈建议你试一下。
分享到:
相关推荐
人脸识别的JavaScript程序包是Face ...它是一个标准的jQuery插件,通过对提供的图片进行分析,返回所有找到的脸部图像的坐标,感兴趣的朋友跟着小编一起学习js人脸识别技术及脸部识别JavaScript类库Tracking.js吧
HTML5 + JavaScript 技术实现的人脸识别,目前仅适用于 Chrome 浏览器,首先需要在地址栏输入 about:flags ,然后找到“启用 MediaStream” 这一项,点击“启用” 后重启 Chrome 浏览器
今天将为大家介绍一个用于人脸检测、人脸识别和人脸特征检测的 JavaScript API,通过在浏览器中利用 tensorflow.js 进行人脸检测和人脸识别。大家不仅可以更快速学习这个,对有人脸识别技术需求的 JS 开发者来说更是...
用 Python 实现人脸识别考勤系统。前端技术栈:HTML, CSS, JavaScript, p5.js。后端技术栈:Python, Flask, Tensorflow, Keras, MySQL
本设计源码提供了一个基于SpringBoot和...该项目曾获得中国软件杯B4赛题国三奖项,适合用于学习和实践Java、Vue、JavaScript、HTML和CSS技术,以及开发基于SpringBoot和Vue的深度学习人脸识别会议签到系统相关的系统。
本项目是一个基于前端人脸识别技术实现的照片合成示例,人脸识别基于trackingjs实现,照片合成基于AlloyImage实现。
基于springboot + vue + 百度SDK 开发的前后端分离人脸识别会议签到系统,支持会议的基本功能,人脸签到,照片签到,人脸登录,地图坐标签到,后台管理功能等。 目录结构 SQL文件位于sql文件夹下的rookismeeting.sql...
智慧校园通行系统:本系统采用前后端分离架构,集成了先进的人脸识别技术,旨在为校园安全提供智能化管理。系统通过微信小程序与用户进行交互,实现了教师和学生的便捷通行。
最近人脸识别技术有所改进,所以我们将使用HTML5和JavaScript技术来玩Hoi游戏。用户侧脸朝PC摄像头上下左右摆动,与电脑对战。我希望你接触到人脸识别技术的世界,说:“你只需一个相机和一个浏览器就可以做到这一点...
基于Python深度神经网络的终身学习智能家居系统源码(含语音控制+人脸识别+信号控制)带项目说明.zip 以树莓派为控制中心,以智能音箱和基于flask web开发的用户界面( UI)为用户交互终端。开发与集成了 Home Assis- ...
大数据分析页面通常是指用于展示和分析大数据集的界面或页面。这些页面通常包含数据可视化工具、数据过滤器、图表和表格,以便用户能够...前端开发技术:如HTML、CSS、JavaScript等,用于构建交互式的数据分析页面。
安防监控:用于人脸识别、行人检测、行为分析等智能监控系统。 医疗影像分析:在医疗领域,OpenCV可用于医学图像处理、病灶检测、诊断辅助等应用。 自动驾驶:在车辆视觉感知系统中,OpenCV用于道路标志识别、...
起源:OpenCV于1999年由英特尔公司发起,旨在促进计算机视觉技术的普及和商业化应用。该项目旨在创建一个易于使用、高效且跨平台的库,为开发者提供实现计算机视觉算法所需的基础工具。 社区与支持:随着时间的...
近几年,人脸识别技术在身份认证领域的应用已经有了较多应用,例如:支付宝、招行的取款、养老金领取等方面,但在杜绝假冒、认证安全性等方面,目前还是一个比较需要进一步解决的课题,特别是在移动端的活体认证技术...
安防监控:用于人脸识别、行人检测、行为分析等智能监控系统。 医疗影像分析:在医疗领域,OpenCV可用于医学图像处理、病灶检测、诊断辅助等应用。 自动驾驶:在车辆视觉感知系统中,OpenCV用于道路标志识别、...
起源:OpenCV于1999年由英特尔公司发起,旨在促进计算机视觉技术的普及和商业化应用。该项目旨在创建一个易于使用、高效且跨平台的库,为开发者提供实现计算机视觉算法所需的基础工具。 社区与支持:随着时间的...
起源:OpenCV于1999年由英特尔公司发起,旨在促进计算机视觉技术的普及和商业化应用。该项目旨在创建一个易于使用、高效且跨平台的库,为开发者提供实现计算机视觉算法所需的基础工具。 社区与支持:随着时间的...
起源:OpenCV于1999年由英特尔公司发起,旨在促进计算机视觉技术的普及和商业化应用。该项目旨在创建一个易于使用、高效且跨平台的库,为开发者提供实现计算机视觉算法所需的基础工具。 社区与支持:随着时间的...
我一直对视频和图片中的人脸标记、检测和人脸识别技术很感兴趣。尽管我知道获取逻辑和算法去开发人脸识别软件或者插件已经超出了我的想象。当我知道Javascript库可以识别微笑,眼睛和脸部结构时,我得到启发去写一个...