美文网首页Javascript收集Web前端之路让前端飞
【Face++】使用JS实现人脸识别Demo

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

作者: 熠辉web3 | 来源:发表于2017-09-28 18:53 被阅读1316次
人脸分析demo

这是一个上传图片后, 对人脸进行分析的一个Demo, 调用的是Detect APIAnalyze 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;
}

【参考内容】

  1. Face++官网: https://www.faceplusplus.com.cn/
  2. Face++人脸检测Demo: https://www.faceplusplus.com.cn/face-detection/#demo

相关文章

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

    Face++成立于2012年,是一家专注于图像识别和深度学习的技术公司。目前,阿里、360、微博、陌陌、美图、Ca...

  • 人脸识别

    1.介绍 识别图片上的脸部.使用face++来做人脸识别(百度搜索face++即可)。face++的文档很详细,所...

  • Python&Opencv伪AI深度教程!人脸识别以及人

    python+opencv+face++人脸识别以及人脸解锁,Python代码较少。 原理: 利用Face++实现...

  • Face++人脸识别小demo

    人脸识别技术概念 所谓人脸识别技术,即基于人的脸部特征,对输入的人脸图象或者视频流进行判断,首先判断其是否存在人脸...

  • 脸部服务参考

    Face++ 支持服务 人脸识别人脸检测人脸比对人脸搜索人脸关键点人脸属性beta情绪识别beta颜值评分beta...

  • 30岁天才上班族利用Python人脸监控BOSS,伪装成认真上班

    如今Python程序员可以做深度学习算法实现人脸识别,得益于国外开源框架,虽然它不能达到face++和众多人脸识别...

  • 讯飞线性4麦结合虹软人脸识别demo教程

    此仓库主要实现了基于讯飞AIUI语音交互和虹软人脸识别完成的demo库 人脸识别使用方法 1、让你的类实现Face...

  • 了解人脸识别和二维码识别

    人脸识别方案 CoreImage (二维码识别,人脸识别) face++ 2014阿里 收费(两种方案本地计算 ...

  • Face++人脸识别

    最近想研究些之前没有涉猎的知识点,Face++人脸识别,之前一直挺感兴趣的没来的及试试,网上查了下,Face++人...

  • 人脸识别

    2d人脸识别 人脸识别的供应商 市面上能够提供人脸识别解决方案的公司主要有,百度,科大讯飞,旷世face++,虹软...

网友评论

  • 2802331b7099:楼主你好!源码能发一下吗?1137177285@qq.com

本文标题:【Face++】使用JS实现人脸识别Demo

本文链接:https://www.haomeiwen.com/subject/wdyvextx.html