
这是一个上传图片后, 对人脸进行分析的一个Demo, 调用的是Detect API和Analyze API
Dectect API:

这是一个上传两张图片后, 对两张图片中的人脸进行对比的一个demo, 调用的是Compare API
Compare API:

1. html部分
//compare.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/compare.css">
<script src="./lib/jquery-3.2.1.js"></script>
<title>人脸对比</title>
</head>
<body>
<div class="result">
<h3>相似度</h3>
<div id="resultRate"></div>
<h4>经过<b>Face++</b>判断结果:</h4>
<div id="result"></div>
</div>
<div class="box">
<div class="left">
<div class="imgWrapper">

</div>
<form id="imgUpload" enctype="multipart/form-data">
<input type="file" name="img" id="img01" onchange="showImg()">
</form>
</div>
<div class="right">
<div class="imgWrapper">

</div>
<form id="imgCompare" enctype="multipart/form-data">
<input type="file" name="img" id="img02" onchange="showAnotherImg()" multiple>
</form>
</div>
<div class="compareBtnWraaper">
<input type="button" id="compareBtn" value="比较一下" type="button" class="btn btn-primary btn-lg btn-block">
</div>
</div>
<script src="./js/compare.js"></script>
</body>
</html>
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
网友评论