百度AI---人脸对比(前端拍照上传后端进行对比,后端调用百度接口返回对比信息)

百度ai人脸对比:

首先由个百度账号,进入百度开发者中心
百度开发者中心

登录后选择百度ai开发平台
在这里插入图片描述
进入右侧控制台后选择人脸识别:
在这里插入图片描述
进入后先创建一个应用,将所有不收费的都领取一下
在这里插入图片描述
创建完成后就能获得密钥了
接着进入sdk中
在这里插入图片描述
找到java SDK
进入后,下载SDK
JAVA SDK下载地址
在这里插入图片描述
这里是主要的结构图
创建一个空的SpringBoot项目(方便后续跟前端连接,web项目也可以)
官方给出的jar包好像不用导入也可以,直接导入下列两个jar包

<dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-simple</artifactId>
    <version>1.7.25</version>
</dependency>
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20180130</version>
</dependency>

基本的项目结构是这样子,再准备两张图片和一个前端页面用于拍照
在这里插入图片描述

接着进入api的关键类,AipFace这里面就是百度提供给我们的所有方法,可直接使用
在这里插入图片描述
新建一个测试类:
直接调用他的方法即可,这里要注意传入的照片格式为Base64,所以我写了一个类,将照片转为Base64

public class Test {
    public static final String APP_ID = "APP_ID ";
    public static final String API_KEY = "API_KEY ";
    public static final String SECRET_KEY = "SECRET_KEY ";

    public static void main(String[] args) {
        AipFace aipFace = new AipFace(APP_ID, API_KEY, SECRET_KEY);
        String img1="D:\\FaceDemo\\src\\main\\resources\\imgs\\img1.jpg";
        String img2="D:\\FaceDemo\\src\\main\\resources\\imgs\\img2.jpg";
        //两张不一样的图片
        String getImageStr1 = GetImageStr(img1);
        String getImageStr2 = GetImageStr(img2);

//        String getImageStr3 = GetImageStr(img1);

        List<MatchRequest> input = new ArrayList<>();
        MatchRequest mr1 = new MatchRequest(getImageStr1, "BASE64");
        MatchRequest mr2 = new MatchRequest(getImageStr2, "BASE64");
//        MatchRequest mr2 = new MatchRequest(getImageStr3, "BASE64");
        input.add(mr1);
        input.add(mr2);
        JSONObject match = aipFace.match(input);
        System.out.println(match);
    }

    public static String GetImageStr(String imgFile) {//将图片文件转化为字节数组字符串,并对其进行Base64编码处理
        InputStream in = null;
        byte[] data = null;
        //读取图片字节数组
        try {
            in = new FileInputStream(imgFile);
            data = new byte[in.available()];
            in.read(data);
            in.close();

        } catch (IOException e) {
            e.printStackTrace();
        }
        //对字节数组Base64编码
        BASE64Encoder encoder = new BASE64Encoder();
        return encoder.encode(data);//返回Base64编码过的字节数组字符串
    }

}

官方给出的参数信息:
在这里插入图片描述
返回值,这个score就是两张图片的相似度了!!

{
  "score": 44.3,
  "face_list": [  //返回的顺序与传入的顺序保持一致
      {
          "face_token": "fid1"
      },
      {
          "face_token": "fid2"
      }
  ]
}

前端代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title></title>
    <!-- 样式部分可以忽略 -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn {
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background: #ff9900;
            line-height: 50px;
            text-align: center;
            color: #fff;
            box-shadow: 0 0 10px #999;
        }

        #video {
            width: 300px;
            height: 300px;
            border: 5px solid #000;
            border-radius: 10px;
            margin-left: 5px;
        }

        #canvas {
            width: 300px;
            height: 300px;
            border: 5px solid #000;
            border-radius: 10px;
            margin-left: 5px;
        }
    </style>
</head>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

<body>
<div>
    <div id="play" class="btn">开始摄像</div>
    <div id="take" class="btn">拍照</div>
    <div id="sub_btn" class="btn">登录</div>
    <video id="video"></video>
    <!-- 尽量在canvas标签上设置宽高 -->
    <canvas id="canvas" width="300px" height="300px"></canvas>

</div>
<script>
    $(function () {
        // 开启摄像
        document.getElementById('play').onclick = () => {
            let constraints = {
                // video属性设置
                video: {
                    width: 300,
                    height: 300
                },
                // audio属性设置
                audio: false
            }
            navigator.mediaDevices.getUserMedia(constraints)
                .then(mediaStream => {
                    // 成功返回promise对象,接收一个mediaStream参数与video标签进行对接
                    document.getElementById('video').srcObject = mediaStream
                    document.getElementById('video').play()
                })
            // 失败就失败了
        }
        // 拍照、canvas绘制
        document.getElementById('take').onclick = () => {
            let ctx = document.getElementById("canvas").getContext('2d')
            ctx.drawImage(document.getElementById("video"), 0, 0, 300, 300)
        }

        $("body").on("click", "#sub_btn", function () {
            var imgdata = document.getElementById("canvas").toDataURL("image/jpeg");
            console.log(imgdata)
            $.ajax({
                url:"/Face/test",
                type:"post",
                async: true,
                dataType:"json",
                contentType : "application/x-www-form-urlencoded; charset=utf-8",
                data:{
                    image:imgdata
                },
                success:function (res) {
                    if (res.result.score>70)
                        alert("登录成功")
                    else  alert("登录失败")
                }
            })

        });


    })
</script>
</body>

</html>

编写url路径,修改测试类:

package com.baidu.aip.Controller;

import com.baidu.aip.face.AipFace;
import com.baidu.aip.face.MatchRequest;
import org.json.JSONObject;

import org.springframework.web.bind.annotation.*;
import sun.misc.BASE64Encoder;

import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;


@RestController
@RequestMapping("/Face")
public class FaceController {
    public static final String APP_ID = "APP_ID ";
    public static final String API_KEY = "API_KEY ";
    public static final String SECRET_KEY = "SECRET_KEY ";

    @PostMapping( "/test")
    public String Test(@RequestParam("image") String image) {
        String substring = image.substring("data:image/jpeg;base64,".length());
        AipFace aipFace = new AipFace(APP_ID, API_KEY, SECRET_KEY);
        String img1="D:\\FaceDemo\\src\\main\\resources\\imgs\\img1.jpg";
        //两张不一样的图片
        String getImageStr1 = GetImageStr(img1);
       List<MatchRequest> input = new ArrayList<>();
        MatchRequest mr1 = new MatchRequest(getImageStr1, "BASE64");
        MatchRequest mr2 = new MatchRequest(substring, "BASE64");

        input.add(mr1);
        input.add(mr2);
        JSONObject match = aipFace.match(input);
        System.out.println(match);
        return match.toString();
    }

    public static String GetImageStr(String imgFile) {//将图片文件转化为字节数组字符串,并对其进行Base64编码处理
        InputStream in = null;
        byte[] data = null;
        //读取图片字节数组
        try {
            in = new FileInputStream(imgFile);
            data = new byte[in.available()];
            in.read(data);
            in.close();

        } catch (IOException e) {
            e.printStackTrace();
        }
        //对字节数组Base64编码
        BASE64Encoder encoder = new BASE64Encoder();
        return encoder.encode(data);//返回Base64编码过的字节数组字符串
    }
}

接下来直接启动项目,测试就可以了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牛总来学习了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值