前端获取人脸利用Face++进行对比
前端利用了vue获取
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">
<title>Documenttitle>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
div.showImage{
width: 800px;
margin: 20px auto;
text-align: center;
}
div.showImage::after{
content: '';
display: block;
clear: both;
}
div.showImage > button{
margin-top: 280px;
}
#img1{
width: 350px;
height: 600px;
float: left;
}
#img2{
width: 350px;
height: 600px;
float: right;
}
#faceform{
text-align: center;
}
style>
head>
<body>
<div id="app">
<form id="faceform" action="https://api-cn.faceplusplus.com/facepp/v3/compare" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="image_file1" @change="getFile1">
<input type="file" name="image_file2" @change="getFile2">
form>
<div class="showImage">
<img id="img1" :src="src1" hidden>
<button @click="submit">比较button>
<img id="img2" :src="src2" hidden>
div>
<span id="showconfidence">span>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js">script>
<script>
var app = new Vue({
el: '#app',
data:{
src1: '',
src2: '',
file1: null,
file2: null,
confidence:false
},
methods:{
submit:function(){
var self = this
$('#showconfidence').text('正在计算中。。。')
$.ajax({
url: 'compare/',
type: 'POST',
cache: false,
data: new FormData($('#faceform')[0]),
processData: false,
contentType: false
}).done(function(res) {
$('#showconfidence').text('相似度：'+res.confidence)
}).fail(function(res) {
console.log(res)
});
},
getFile1:function($event){
this.file1 = $event.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(this.file1);
var app = this;
reader.onloadend=function() {
app.src1 = this.result;
$('#img1').attr('hidden',false)
};
},
getFile2:function($event){
this.file2 = $event.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(this.file2);
var app = this;
reader.onloadend=function() {
app.src2 = this.result;
$('#img2').attr('hidden',false)
};
}
}
})
script>
html>后台利用了python的django框架接收图片数据并且去访问Face++的接口这样会避免浏览器跨域的问题
urls.py(配置路由):
from django.urls import path
from face import views
urlpatterns = [
path('', views.face),
path('compare/', views.compare),
]views.py（访问接口）
当然访问接口的参数较多，可以随意选择
def face(request):
return render(request,'face.html')
def compare(request):
response = requests.post('https://api-cn.faceplusplus.com/facepp/v3/compare', \
data={'api_key': api_key, 'api_secret': api_secret}, \
files=request.FILES)
return HttpResponse(bytes.decode(response.content),content_type='application/json')settings.py(添加API_KEY，API_SECRET)
这是在Face++的官网上申请的，免费用的
import pyface.settings as config
api_key = config.API_KEY
api_secret = config.API_SECRET
# Face++ config
API_KEY = 'XXXXXXXXXXXXXXXXXXXXXXXXX'
API_SECRET = 'XXXXXXXXXXXXXXXXXXXXXXXX'然后就可以运行django框架中的manage.py启动服务
python manage.py runserver
运行前
运行后
运行后返回值中有参数confidence为相似度，根据相似度可判定是否为同一人
git地址：https://github.com/aistard/Face-recognition.git