前端获取人脸利用Face++进行对比

小灰灰 2022-05-28 11:35 85阅读 0赞

前端利用了vue获取  
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"> <title>Document</title> <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  
运行前

![这里写图片描述][70]

运行后  
![这里写图片描述][70 1]

运行后返回值中有参数confidence为相似度，根据相似度可判定是否为同一人

git地址：[https://github.com/aistard/Face-recognition.git][https_github.com_aistard_Face-recognition.git]

[70]: /images/20220528/9b98b48c43084705a98494d0ff7bdf91.png
[70 1]: /images/20220528/b49327dc134646d485c3d47548623b93.png
[https_github.com_aistard_Face-recognition.git]: https://github.com/aistard/Face-recognition.git