【Face++】使用JS实现人脸识别Demo

2017-09-28 本文已影响1316人熠辉web3

人脸分析demo

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

Dectect API:

人脸对比demo

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

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">
                ![](./img/blackimg.png)
            </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">
                ![](./img/blackimg.png)
            </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

【Face++】使用JS实现人脸识别Demo

猜你喜欢

热点阅读