本文可视为《用HTML5实现人脸识别》的进阶,在人脸识别的基础上,我们将使用纯Javascript来实现如下的功能:
从本文的内容中,你将意识到,Javascript能做的,能实现的,远远比你想象的多。
演示
一、实现
1、人脸识别
Face.com有包括检测、识别在内的多个API接口,根据《用HTML5实现人脸识别》一文,我们已经可以实现图片上传,并得到检测的结果,结果如下:
返回的参数
返回参数的详细解释参见http://developers.face.com/docs/api/return-values/,其中tags为多张照片的识别结果,每一个结果包括了耳朵、眼睛、嘴、鼻的中心位置,以及年龄、性别、是否佩戴眼镜、情绪、是否在笑等多种信息。
上传图片并请求接口的代码如下。
function buildRequest(imgSrc) {
document.getElementById("detect").disabled = true;
document.getElementById("beauty").disabled = true;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = imgSrc;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
document.getElementById("bigImg").style.width = imgObj.width;
var data = canvas.toDataURL('image/jpeg', 1.0);
newblob = dataURItoBlob(data);
var formdata = new FormData();
formdata.append("api_key", "your key");
formdata.append("api_secret", "your secret");
formdata.append("filename","avatar.jpg");
formdata.append("file",newblob);
$.ajax({
url: 'http://api.face.com/faces/detect.json?attributes=age_est,gender,mood,smiling,glasses',
data: formdata,
cache: false,
contentType: false,
processData: false,
dataType:"json",
type: 'POST',
success: function (data) {
handleResult(data.photos[0]);
}
});
}
人脸标注
我们将根据人脸识别的结果对五官和面部进行标注。标注的方式有两种,一种是基于Canvas的绘图,一种是传统DIV方式标注。下面我们采用第二种方式,原理是在各个点上画一个3*3的DIV,DIV的背景色为红色,采用绝对定位。接口返回的五官数值为宽高所在点的百分比值,所以需要先进行换算。
标注五官的方法如下:
function drawFacial(data) {
var width = data.width;
var height = data.height;
var points = ["eye_left", "eye_right", "mouth_left", "mouth_center", "mouth_right", "nose", "ear_left", "ear_right"];
for(var i = 0; i < points.length; i++) {
var div = document.createElement('div');
div.style.width = "3px";
div.style.height = "3px";
div.style.backgroundColor = "red";
div.style.position = "absolute";
div.className = "facePoint";
var values = data.tags[0][points[i]];
if(values != null) {
var left_x = values.x;
div.style.left = left_x * width / 100 - 1 + "px";
var left_y = values.y;
div.style.top = left_y * height / 100 - 1 + "px";
document.body.appendChild(div);
}
}
}
标注人脸区域的方法如下:
function drawFace(data) {
var width = data.width;
var height = data.height;
var faceWidth = data.tags[0].width * width / 100;
var faceHeight = data.tags[0].height * height / 100;
var faceCenter = data.tags[0].center;
var div = document.createElement('div');
div.style.width = faceWidth + "px";
div.style.height = faceHeight + "px";
div.style.borderColor = "red";
div.style.borderWidth = "1px";
div.style.borderStyle = "dotted";
div.style.position = "absolute";
div.className = "faceBox";
div.style.left = faceCenter.x * width / 100 - faceWidth / 2 - 1 + "px";
div.style.top = faceCenter.y * height / 100 - faceHeight / 2 - 1 + "px";
document.body.appendChild(div);
}
从结果来看,Face.com的检测结果非常精准。
分享到:
相关推荐
在本文中,我们将深入探讨如何基于百度API使用JavaScript实现人脸识别技术。人脸识别是一种计算机视觉技术,它能够通过分析图像或视频中的面部特征来识别人的身份。百度提供了强大的人脸识别API,为开发者提供了一种...
此外,还引入了 p5.js 这个JavaScript库,它提供了一套丰富的绘图功能,可以用于在网页上实时处理和显示人脸图像,实现人脸检测和追踪的可视化。 后端部分: 后端主要由 Python 和 Flask 框架构建。Flask 是一个轻...
- **Ajax异步通信**:为了实现无刷新的用户体验,前端可能使用Ajax(Asynchronous JavaScript and XML)技术,将图像数据以JSON格式发送到后台Servlet。 - **MVC架构**:在JavaEE应用中,Model-View-Controller...
在IT领域,JavaScript(简称JS)是一种广泛使用的脚本语言,尤其在网页开发中起着核心作用。"视频人脸js包.zip" 提供了一个专门针对人脸视频处理的JS库,帮助开发者实现在网页上进行人脸识别和相关操作。下面将详细...
10. **用户交互界面**: 用户界面可能使用HTML、CSS和JavaScript创建,提供友好的用户体验,使得人脸注册和登录过程直观易懂。 总之,这个项目展示了一个集成人脸识别技术的Java Web应用程序,涵盖了从后端处理到...
然后,使用JavaScript代码加载转换后的模型,并设置人脸检测和识别的参数。 5. **实时处理**:当用户上传或捕获一张图片时,使用face-api.js进行人脸检测,找到面部关键点,然后将这些信息传递给加载的模型进行识别...
7. **权限管理**:由于涉及用户隐私,使用人脸识别功能需要获取用户的授权。在微信小程序中,开发者需要在小程序配置文件中声明相关权限,并在运行时检查和请求用户许可。 8. **二次开发**:这个项目提供了一个基础...
【标题】:“asp.net+websocket+emgucv实现人脸识别完整”这个项目是基于ASP.NET技术,结合WebSocket通信协议和EMGU CV库构建的人脸识别系统。它提供了一个完整的示例,包括Web客户端(NewFaceWeb)和服务端...
这个文件应该会讲解如何在网页中引用并使用MSCOMM32.ocx控件,以及如何用JavaScript编写控制串口的函数,如打开串口、设置波特率、数据位、停止位、校验位,发送和接收数据等。 实现JavaScript串口通信的关键步骤...
"200 行 JavaScript 的人脸检测库"——pico.js,是这个领域的杰出代表,它以其小巧轻便、高效快速的特点引起了广泛关注。这款库的源代码仅有200行,却能实现高效的人脸检测,而且在实际环境中可以处理超过200帧每秒...
在这个项目中,我们使用了百度AI的人脸识别API。 1. **人脸检测**:首先,我们需要检测图片中的人脸位置,百度AI提供了人脸检测算法,可以定位出图片中的人脸框。 2. **人脸特征提取**:检测到人脸后,会提取关键的...
在本文中,我们将深入探讨如何使用纯JavaScript实现一个具有手动抓拍、自动抓拍功能的人脸识别服务,并能获取人脸照片。此服务还允许用户切换摄像头,为用户提供更灵活的操作体验。由于这是一个基于Web的应用,因此...
虽然它通常不直接处理图像处理任务,但由于其在浏览器中的普及性,许多JavaScript库被开发出来以实现在浏览器端的人脸检测功能,这让开发者能够在没有服务器端支持的情况下处理图像数据。 在上述内容中,提到了一个...
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip基于JavaScript实现三角格子棋盘五子棋.zip...
javascript 实现的进度条效果 javascript 实现的进度条效果
基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的程序员表白爱心代码(2套) 基于JavaScript实现的...
用javascript实现购物车特效
在JavaScript中实现“另存为”功能并不直接,因为出于安全考虑,浏览器并不提供直接调用“另存为”对话框的API。但是,我们可以通过一些技巧来模拟这一行为。以下是一些关键知识点: 1. **创建Blob对象**:首先,...