首先给上自己开发的网站demo: 点击打开链接
首先是思路,face++要求获取图片的URL,因此
首先将前端上传的文件直接上传到云数据库(无需通过后台),我使用的是bmob云数据库,如何使用bmob请到官网查阅文档,很简单的
使用bmob记得要初始化,我这里就不贴了,直接贴获取url的代码
function uploadBmob(){
$("#loading").show();
var fileUploadControl = $("#fileElem")[0];
if (fileUploadControl.files.length > 0) {
var file = fileUploadControl.files[0]; //将文件赋值给file
var name = "face.jpg"; //保存后的文件名,随便取
var file = new Bmob.File2(name, file); //将文件上传至云
file.save().then(function(obj) {
var url=obj.url(); //就这么简单的就获取到了图片的URL
getFaceInfo(url);
}, function(error) {
// the save failed.
alert("不好意思,服务器大姨妈,图片无法取得url");
document.getElementById("pleasewait").innerHTML="<p class='text-danger' > 图片信息获取失败!</p>";
});
}
}
function getFaceInfo(urlstr){ //urlstr 为图片url
var api = new FacePP('xxxxxxxxxxxxxxx', 'xxxxxxxxxxxxxxx'); //此处改成你face++项目的
api.request('detection/detect', {
url:urlstr,
attribute:"glass,pose,gender,age,race,smiling" //这样才能获取glass和pose的信息
}, function(err, result) {
if (err) {
// TODO handle error
alert("人脸云端识别出错,请重试!");
return;
}
// TODO 2.use result
var json= JSON.stringify(result, null, 2);
getwuguan(json); //获取五官信息
document.getElementById("pleasewait").innerHTML="<p class='text-success' > 图片上传成功!</p>";
});
}
function getwuguan(json){
alert(json);
var obj = eval ("(" + json + ")"); //解析json
//下面的代码是我自己的项目如何使用变量的,做个例子
facenum=obj.face.length;
if(facenum>1) //检测到多张脸,弹出提示
$('#lianbuqiehuan').popover('show');
var H=document.getElementById("myCanvas").height*0.01;
var W=document.getElementById("myCanvas").width*0.01;
for(var i=0;i<facenum;i++){
faceID[i]=obj.face[i].face_id;
facecenterX[i]=obj.face[i].position.center.x*W;
facecenterY[i]=obj.face[i].position.center.y*H;
facewidth[i]=obj.face[i].position.width*W;
faceheight[i]=obj.face[i].position.height*H;
lefteyeX[i]=obj.face[i].position.eye_left.x*W;
lefteyeY[i]=obj.face[i].position.eye_left.y*H;
righteyeX[i]=obj.face[i].position.eye_right.x*W;
righteyeY[i]=obj.face[i].position.eye_right.y*H;
noseX[i]=obj.face[i].position.nose.x*W;
noseY[i]=obj.face[i].position.nose.y*H;
leftmouthX[i]=obj.face[i].position.mouth_left.x*W;
leftmouthY[i]=obj.face[i].position.mouth_left.y*H;
rightmouthX[i]=obj.face[i].position.mouth_right.x*W;
rightmouthY[i]=obj.face[i].position.mouth_right.y*H;
age_value[i]=obj.face[i].attribute.age.value;
age_range[i]=obj.face[i].attribute.age.range;
gender_value[i]=obj.face[i].attribute.gender.value;
gender_confidence[i]=obj.face[i].attribute.gender.confidence;
/* glass_value[i]=obj.face[i].attribute.glass.value;
glass_confidence[i]=obj.face[i].attribute.glass.confidence;*/
race_value[i]=obj.face[i].attribute.race.value;
race_confidence[i]=obj.face[i].attribute.race.confidence;
smiling_value[i]=obj.face[i].attribute.smiling.value;
// pitch_angle[i]=obj.face[i].attribute.pose.pitch_angle;
facecenterY[i]+=faceheight[i]*0.05;
}
// obj.face[0].position.eye_left.x
}