人脸识别
Face++成立于2012年，是一家专注于图像识别和深度学习的技术公司。目前，阿里、360、微博、陌陌、美图、Camera360、魔漫、世纪佳缘、联想等一批大型的图片、社交、设备类企业都已成为Face++的用户，覆盖了4000多万台月活跃设备。
一. 注册账号
首先，您需要有一个账号
注册账号
- 如果您还没有注册，可以在 Face++ 官网 点击页面右上角的“开始使用”，并在随后打开的页面中，选择 Face++ Web API 下的“免费使用”按钮。并在注册页面根据引导，完成注册
二. 填写开发者资料
-
注册成功并首次登录控制台后，你需要填写开发者资料
填写开发者资料
三. 创建API Key
-
要调用API，需要先创建一个API Key（API 密钥），它是使用 API 和 SDK 的凭证。
创建API Key -
完成API Key创建之后，您会看到页面刷新了，现在可以看到自己的账户余额和API调用量的统计。
控制面板
四. 开始创建Demo吧
Demo1: 人脸分析
人脸分析demo
这是一个上传图片后, 对人脸进行分析的一个Demo, 调用的是Detect API和Analyze API
Dectect API:
detect.api
Analyze API:
analyze.api
1. html 部分
//analyze.html
Document
年龄:
性别:
种族:
佩戴眼镜:
皮肤状况
粉刺:
黑眼圈:
2. script部分
- 当上传文件后, 触发
onload事件, 调用detectImg()函数,获取face_token - 获取
face_token后,调用analyzeImg(),进行人脸分析. - 处理返回的结果, 将结果保存到
faceAttributes这个对象中 - 使用模板引擎渲染到页面
//analyze.js
let faceConfig = {
face_token : '',
}
let faceAttributes = {};
function detectImg() {
var r = new FileReader();
f = document.getElementById('testImg').files[0];
r.readAsDataURL(f);
r.onload = function(e) {
document.getElementById('img').src = this.result;
}
let url = 'https://api-cn.faceplusplus.com/facepp/v3/detect';
let files = $('#testImg').prop('files');
let data = new FormData();
data.append('api_key', "ri01AlUOp4DUzMzMYCjERVeRw88hlvCa");
data.append('api_secret', "pF3JOAxBENEYXV-Q96A3s-CkyWqBg49u");
data.append('image_file', files[0]);
$.ajax({
url: url,
type: 'POST',
data: data,
cache: false,
processData: false,
contentType: false,
success(data) {
faceConfig.face_token = data.faces[0].face_token;
analyzeImg(); //调用分析图片的函数
}
})
}
function analyzeImg() {
let url = 'https://api-cn.faceplusplus.com/facepp/v3/face/analyze';
$.ajax({
url: url,
type: 'POST',
data: {
api_key: "ri01AlUOp4DUzMzMYCjERVeRw88hlvCa",
api_secret: "pF3JOAxBENEYXV-Q96A3s-CkyWqBg49u",
face_tokens: faceConfig.face_token,
return_attributes: "gender,age,smiling,ethnicity,skinstatus,eyestatus"
},
success(data) {
// console.log(data);
let attributes = data.faces[0].attributes;
faceAttributes = {
age : attributes.age.value,
gender: attributes.gender.value,
ethnicity: attributes.ethnicity.value,
glass: attributes.glass.value,
skinstatus: attributes.skinstatus
}
console.log(faceAttributes);
//用jQuery获取模板
var tpl = $("#tpl").html();
//预编译模板
var template = Handlebars.compile(tpl);
//匹配json内容
var html = template(faceAttributes);
//输入模板
$('#result').html(html);
}
})
}
3. css部分
//analyze.css
.imgWrapper{
width:100%;
height: 200px;
margin-top: 50px;
text-align: center;
}
img{
width:180px;
}
#result{
padding:50px 0px 20px 100px;
font-size: 18px;
}
form{
margin-top:20px;
}
#testImg{
width:180px;
margin: 0 auto;
}
Demo2: 人脸对比
人脸对比demo
这是一个上传两张图片后, 对两张图片中的人脸进行对比的一个demo, 调用的是Compare API
Compare API:
compare.api
1. html部分
//compare.html
人脸对比
相似度
经过Face++判断结果:
2.script部分
//compare.js
let face_token = '';
let faceset_token = '';
function showImg() {
var r = new FileReader();
f = document.getElementById('img01').files[0];
r.readAsDataURL(f);
r.onload = function(e) {
document.getElementById('firstImg').src = this.result;
};
}
function showAnotherImg() {
var r = new FileReader();
f = document.getElementById('img02').files[0];
r.readAsDataURL(f);
r.onload = function (e) {
document.getElementById('secondImg').src = this.result;
};
}
$(function(){
//点击compare按钮得到结果
$('#compareBtn').click(function() {
let url = 'https://api-cn.faceplusplus.com/facepp/v3/compare';
var files01 = $('#img01').prop('files');
var files02 = $('#img02').prop('files');
var data = new FormData();
data.append('api_key', "ri01AlUOp4DUzMzMYCjERVeRw88hlvCa");
data.append('api_secret', "pF3JOAxBENEYXV-Q96A3s-CkyWqBg49u");
data.append('image_file1', files01[0]);
data.append('image_file2', files02[0]);
$.ajax({
url: url,
type: 'post',
data: data,
cache: false,
processData: false,
contentType: false,
success(data) {
console.log(data);
$('#resultRate').html(data.confidence + '%')
if(data.confidence > 80){
$('#result').html("是一个人");
}else{
$('#result').html("不是一个人");
}
}
})
})
})
3. css部分
//compare.css
html{
width:100%;
}
body{
width:100%;
}
.box{
width:100%;
position: relative;
top:80px;
border:1px solid #fff;
}
.imgWrapper{
width: 150px;
position: absolute;
top:10px;
text-align: center;
padding-top:10px;
}
input[type="file"] {
width:100%;
}
img{
width:100%;
}
.left{
width:50%;
float: left;
padding:20px;
}
.right{
width:50%;
float: left;
border-left:1px solid #ccc;
padding:20px;
}
#imgUpload{
margin-top: 200px;
}
#imgCompare{
margin-top: 200px;
}
.compareBtnWraaper{
text-align: center;
}
.result{
text-align: center;
}
#resultRate{
height:100px;
font-size: 40px;
font-weight: 800;
}
#result{
font-size: 36px;
color:red;
height:75px;
}
【参考内容】
- Face++官网: https://www.faceplusplus.com.cn/
- Face++人脸检测Demo: https://www.faceplusplus.com.cn/face-detection/#demo