标签：人脸识别 String AI data face 人脸 import com public

基于百度AI智能的人脸识别实现人脸注册与登录

一、后端

1.1、引入sdk

  <!-- 人脸识别 sdk-->
        <dependency>
            <groupId>com.baidu.aip</groupId>
            <artifactId>java-sdk</artifactId>
            <version>4.15.1</version>
            <exclusions>
                <exclusion>
                    <groupId>org.slf4j</groupId>
                    <artifactId>slf4j-simple</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

1.2、创建FaceUtil，获取ApiFace

package com.zzuli.face.utils;


import com.baidu.aip.face.AipFace;
import com.baidu.aip.util.Base64Util;

/**

 * Desc: 人脸识别工具
 */
public class FaceUtil {
    private static final String APP_ID = "24568329";
    private static final String APP_KEY = "MD4UGsv8o7BkDedoz5ixPGxK";
    private static final String SECRET_KEY = "r0fcdQz7yOIToiylEFnXF42k7yaXrooo";

    private static volatile AipFace client = new AipFace(APP_ID, APP_KEY, SECRET_KEY);
    // 创建单例避免多次获取sdk
    public static AipFace getClient(){
        client.setConnectionTimeoutInMillis(2000);
        client.setSocketTimeoutInMillis(60000);
        return client;
    }


    /**
     * 编码
     * @param form
     * @return
     */
    public static String encodeBase64(byte[] form){
        return Base64Util.encode(form);
    }

    /**
     * 解码
     * @param data
     * @return
     */
    public static byte[] decodeBase64(String data){
        return Base64Util.decode(data);
    }
}

1.3、创建FaceResultUtil，统一处理请求

package com.zzuli.face.utils;

import com.zzuli.face.constant.ErrorEnum;
import com.zzuli.face.constant.FaceConstant;
import com.zzuli.face.dto.FaceResult;
import com.zzuli.face.exception.BizException;``
import org.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;


/**
 * Desc: 结果工具封装
 */
public class FaceResultUtil {
    private static final Logger logger = LoggerFactory.getLogger("百度API接口请求结果解析");

    public static FaceResult isSuccess(JSONObject res){
        FaceResult result = parseJsonObject(res);
        if (!result.isSuccess()){
            // 对错误进行分类
            ErrorEnum errorEnum = ErrorEnum.getInstance(result.getErrorCode());
            System.out.println(result.getErrorCode());
            if (errorEnum == null){
                throw new BizException("百度接口请求失败" + result.getErrorMsg());
            }else {
                throw new BizException(errorEnum.getCnDesc());
            }
        }
        return result;
    }


    /**
     * 解析JsonObject
     * @return
     */
    private static FaceResult parseJsonObject(JSONObject res){
        FaceResult faceResult = FaceResult.builder().build();
        try {
            String logId = res.has(FaceConstant.LOG_ID) ? res.get(FaceConstant.LOG_ID).toString() : "0";
            int errorCode = res.has(FaceConstant.ERROR_CODE) ? res.getInt(FaceConstant.ERROR_CODE) : -1;
            String errorMsg = res.has(FaceConstant.ERROR_MSG) ? res.getString(FaceConstant.ERROR_MSG) : "";
            int cached = res.has(FaceConstant.CACHED) ? res.getInt(FaceConstant.CACHED) : 0;
            long timestamp = res.has(FaceConstant.TIMESTAMP) ? res.getLong(FaceConstant.TIMESTAMP) : 0;
            Object dataString = res.has(FaceConstant.RESULT) ? res.get(FaceConstant.RESULT) : "";
            com.alibaba.fastjson.JSONObject data = null;
            if (dataString != null) {
                 data = com.alibaba.fastjson.JSONObject.parseObject(dataString.toString());
            }
            faceResult.setLogId(logId);
            faceResult.setErrorCode(errorCode);
            faceResult.setErrorMsg(errorMsg);
            faceResult.setCached(cached);
            faceResult.setTimestamp(timestamp);
            faceResult.setData(data);
        }catch (Exception e){
            logger.error("JSONObject解析失败", e);
        }
        return faceResult;
    }
}

1.4、创建FaceResult

package com.zzuli.face.dto;

import com.alibaba.fastjson.JSONObject;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

/**

 * Desc: 请求百度API接口结果
 */
@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class FaceResult implements Serializable {
    private String logId;

    private String errorMsg;

    private int cached;

    private int errorCode;

    private long timestamp;

    private JSONObject data;

    public boolean isSuccess(){
        return 0 == this.errorCode ? true : false;
    }
}

1.5、创建ImageU

package com.zzuli.face.dto;


import com.zzuli.face.constant.ImageTypeEnum;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;


@Builder
@AllArgsConstructor
@NoArgsConstructor
public class ImageU implements Serializable {

    private ImageTypeEnum imageTypeEnum;

    private String data;
}

1.6 、创建FaceUserDTO

package com.zzuli.face.dto;


import com.zzuli.face.constant.FaceConstant;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;


@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class FaceUserDTO<T> implements Serializable {

    private String userId;

    private String groupId = FaceConstant.DEFAULT_GROUP_ID;

    private String faceToken;

    private T user;
}

1.7、 创建FaceManage 对人脸的操作的各种操作

package com.zzuli.face;

import com.alibaba.fastjson.JSON;
import com.baidu.aip.face.FaceVerifyRequest;
import com.baidu.aip.face.MatchRequest;
import com.zzuli.face.constant.ActionTypeEnum;
import com.zzuli.face.constant.FaceConstant;
import com.zzuli.face.constant.LivenessControlEnum;
import com.zzuli.face.constant.QualityControlEnum;
import com.zzuli.face.dto.FaceResult;
import com.zzuli.face.dto.FaceUserDTO;
import com.zzuli.face.dto.ImageU;
import com.zzuli.face.utils.FaceResultUtil;
import com.zzuli.face.utils.FaceUtil;
import org.json.JSONException;
import org.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Objects;

/**

 * Desc: 人脸识别相关服务
 */
public class FaceManage {
    private static final Logger logger = LoggerFactory.getLogger(FaceManage.class);

    /**
     * 人脸注册
     */
    public static String faceRegister(FaceUserDTO userDTO, ImageU imageU) throws JSONException {
        // 传入可选参数调用接口
        HashMap<String, String> options = new HashMap<String, String>();
        // 用户资料
        options.put("user_info", JSON.toJSONString(userDTO));
        // 图片质量
        options.put("quality_control", QualityControlEnum.LOW.name());
        // 活体检测控制
        options.put("liveness_control", LivenessControlEnum.NONE.name());
        // 操作方式
        options.put("action_type", ActionTypeEnum.REPLACE.name());

        String image = imageU.getData();
        String imageType = imageU.getImageTypeEnum().name();
        String groupId = userDTO.getGroupId();
        String userId = userDTO.getUserId();

        // 人脸注册
        JSONObject res = FaceUtil.getClient().addUser(image, imageType, groupId, userId, options);
        FaceResultUtil.isSuccess(res);
        String result = res.toString();
//        String msg = res.getString(FaceConstant.ERROR_MSG);
        return result;
    }


    /**
     * 人脸更新
     */
    public static void faceUpdate(FaceUserDTO userDTO, ImageU imageU) throws JSONException {
        HashMap<String, String> options = new HashMap<String, String>();
        // 用户资料
        options.put("user_info", JSON.toJSONString(userDTO));
        // 图片质量
        options.put("quality_control", QualityControlEnum.LOW.name());
        // 活体检测控制
        options.put("liveness_control", LivenessControlEnum.NONE.name());
        // 操作方式
        options.put("action_type", ActionTypeEnum.REPLACE.name());

        String image = imageU.getData();
        String imageType = imageU.getImageTypeEnum().name();
        String groupId = userDTO.getGroupId();
        String userId = userDTO.getUserId();

        // 人脸更新
        JSONObject res = FaceUtil.getClient().updateUser(image, imageType, groupId, userId, options);
        FaceResultUtil.isSuccess(res);
        logger.info("人脸更新成功 {}", res.toString(2));
    }


   
    /**
     * 人脸搜索
     */
    public static FaceResult faceSearch(String groupIds, ImageU imageU) {
        HashMap<String, String> options = new HashMap<String, String>();
        options.put("max_face_num", "1");
        options.put("max_user_num", "1");
        options.put("quality_control", QualityControlEnum.LOW.name());
        options.put("liveness_control", LivenessControlEnum.NONE.name());
        // 人脸搜索
        JSONObject res = FaceUtil.getClient().search(imageU.getData(), imageU.getImageTypeEnum().name(), groupIds, options);
        return FaceResultUtil.isSuccess(res);
    }



}

1.8、结果枚举类

package com.zzuli.face.constant;

/**

 * Desc: 百度接口错误码,还需要加CODE看官方文档
 */
public enum  ErrorEnum {
    ERROR_ENUM_1(1, "Unknown error", "服务器内部错误，请再次请求"),
    ERROR_ENUM_13(13, "Get service token failed", "获取token失败"),
    ERROR_ENUM_222202(222202, "pic not has face", "图片中没有人脸"),
    ERROR_ENUM_222203(222203, "image check fail", "无法解析人脸"),
    ERROR_ENUM_222207(222207, "match user is not found", "未找到匹配的用户"),
    ERROR_ENUM_222209(222209, "face token not exist", "face token不存在"),
    ERROR_ENUM_222301(222301, "get face fail", "获取人脸图片失败"),
    ERROR_ENUM_223102(223102, "user is already exist", "该用户已存在"),
    ERROR_ENUM_223106(223106, "face is not exist", "该人脸不存在"),
    ERROR_ENUM_223113(223113, "face is covered", "人脸模糊"),
    ERROR_ENUM_223114(223114, "face is fuzzy", "人脸模糊"),
    ERROR_ENUM_223115(223115, "face light is not good", "人脸光照不好"),
    ERROR_ENUM_223116(223116, "incomplete face", "人脸不完整"),
    ;

    ErrorEnum(int errorCode, String desc, String cnDesc){
        this.errorCode = errorCode;
        this.desc = desc;
        this.cnDesc = cnDesc;
    }

    private int errorCode;

    private String desc;

    private String cnDesc;


    public static ErrorEnum getInstance(int errorCode){
        for (ErrorEnum value : ErrorEnum.values()) {
            if (value.errorCode == errorCode){
                return value;
            }
        }
        return null;
    }

    public int getErrorCode() {
        return errorCode;
    }

    public void setErrorCode(int errorCode) {
        this.errorCode = errorCode;
    }

    public String getDesc() {
        return desc;
    }

    public void setDesc(String desc) {
        this.desc = desc;
    }

    public String getCnDesc() {
        return cnDesc;
    }

    public void setCnDesc(String cnDesc) {
        this.cnDesc = cnDesc;
    }
}

1.9、常量类

package com.zzuli.face.constant;

/**

 * Desc:
 */
public class FaceConstant {
    /**
     * 默认组别
     */
    public static final String DEFAULT_GROUP_ID = "test";

    /**
     * 匹配分数
     */
    public static final int MATCH_SCORE = 80;


    public static final String RESULT = "result";
    public static final String LOG_ID = "log_id";
    public static final String ERROR_MSG = "error_msg";
    public static final String CACHED = "cached";
    public static final String ERROR_CODE = "error_code";
    public static final String TIMESTAMP = "timestamp";

    public static final String SCORE = "score";
    public static final String FACE_LIST = "face_list";
    public static final String FACE_TOKEN = "face_token";
    public static final String USER_ID_LIST = "user_id_list";
    public static final String GROUP_ID_LIST = "group_id_list";
    public static final String USER_LIST = "user_list";
}

1.10、图片格式枚举类

package com.zzuli.face.constant;

/**

 * Desc: 图片类型
 */
public enum  ImageTypeEnum {
    BASE64("BASE64", 2),
    URL("URL", 0),
    FACE_TOKEN("FACE_TOKEN", 0);

    ImageTypeEnum(String key, int size){
        this.key = key;
        this.size = size;
    }

    /**
     * key
     */
    private String key;

    /**
     * 大小 单位:M
     */
    private int size;

    public String getKey() {
        return key;
    }

    public void setKey(String key) {
        this.key = key;
    }

    public int getSize() {
        return size;
    }

    public void setSize(int size) {
        this.size = size;
    }
}

1.11、Service类

package com.zzuli.service.impl;

import com.zzuli.face.FaceManage;
import com.zzuli.face.constant.ImageTypeEnum;
import com.zzuli.face.dto.FaceResult;
import com.zzuli.face.dto.FaceUserDTO;
import com.zzuli.face.dto.ImageU;
import com.zzuli.service.FaceService;
import com.zzuli.util.Base64ImageUtils;
import lombok.extern.slf4j.Slf4j;
import org.json.JSONException;
import org.springframework.stereotype.Service;
import org.springframework.util.ResourceUtils;
import org.springframework.web.multipart.MultipartFile;
import sun.misc.BASE64Encoder;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;

@Service
@Slf4j
public class FaceServicecImpl implements FaceService {

//    添加人脸得到百度


    @Override
    public String addFace(String groupId, String userId, String userInfo, MultipartFile faceImg) {



        if (!faceImg.isEmpty()) {
            //保存文件到服务器
            //文件上传的地址

            try {
                String path = ResourceUtils.getURL("classpath:").getPath()+"static/img";
                String realPath = path.replace('/', '\\').substring(1,path.length());
                //用于查看路径是否正确
                System.out.println(realPath);

                //获取文件的名称
                final String fileName = faceImg.getOriginalFilename();
                System.out.println(fileName);
                //限制文件上传的类型
                String contentType = faceImg.getContentType();
                if("image/jpeg".equals(contentType) || "image/jpg".equals(contentType) ){
                    assert fileName != null;
                    File file = new File(realPath,fileName);

                    //完成文件的上传
                    faceImg.transferTo(file);
//                    对用户信息数据得得封装
                    FaceUserDTO<String> faceUserDTO = new FaceUserDTO<>();
                    faceUserDTO.setUserId(userId);
                    faceUserDTO.setUser(userInfo);
                    faceUserDTO.setGroupId(groupId);

//                    获取图片Base64编码
                    File directory = new File(realPath+"\\"+ fileName);
                    String reportPath = directory.getCanonicalPath();
                    String facedata = Base64ImageUtils.GetImageStrFromPath(reportPath);

            /**
             * 这里可以简化一部分操作，穿过老的图片直接传为Base64，而不用保存之后再读取来转换
             * 代码如下面两行
             */
//                    BASE64Encoder encoder = new BASE64Encoder();
//                    String faceData = encoder.encode(faceImg.getBytes());

                    ImageU imageU = ImageU.builder().data(facedata).imageTypeEnum(ImageTypeEnum.BASE64).build();
                    String data = FaceManage.faceRegister(faceUserDTO, imageU);

//                    String data = FaceAdd.add(realPath, fileName, groupId, userId, userInfo);
                    System.out.println("图片上传成功!");
                    System.out.println(data);
                    return data;

                } else {
                    System.out.println("上传失败！");
                    return null;

                }

            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
        return null;
    }

    @Override
    public FaceResult searchFace( MultipartFile faceImg) {

        try {
//            String path = ResourceUtils.getURL("classpath:").getPath()+"static/img";
//            String realPath = path.replace('/', '\\').substring(1,path.length());
//            final String fileName = faceImg.getOriginalFilename();
//            File file = new File(realPath,fileName);

            //完成文件的上传
//            将图片保存下来
//            faceImg.transferTo(file);

//            Base64ImageUtils.GetImageStrFromUrl()
            BASE64Encoder encoder = new BASE64Encoder();
            String faceData = encoder.encode(faceImg.getBytes());

//            获取保存图片的路径
//            File directory = new File(realPath+"\\"+ fileName);
//            String reportPath = directory.getCanonicalPath();
            转化为base64格式
//            String facedata = Base64ImageUtils.GetImageStrFromPath(reportPath);
            ImageU imageU = ImageU.builder().data(faceData).imageTypeEnum(ImageTypeEnum.BASE64).build();
            String groups = "test";
            FaceResult faceResult = FaceManage.faceSearch(groups, imageU);
            System.out.println(faceResult);
            return faceResult;

        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }


        return null;
    }
}

1.12、Controller类

package com.zzuli.face.controller;

import cn.hutool.core.map.MapUtil;


import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import com.alibaba.fastjson.JSONArray;
import com.zzuli.DTO.UserFaceDto;
import com.zzuli.common.lang.Result;
import com.zzuli.entity.User;
import com.zzuli.face.dto.FaceResult;
import com.zzuli.service.FaceService;
import com.zzuli.service.UserService;
import com.zzuli.util.JWTUtil;
import org.json.JSONException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;


import javax.servlet.http.HttpServletResponse;

@RestController
@RequestMapping("/face")
public class FaceController {

    @Autowired
    private FaceService faceService;

    @Autowired
    private JWTUtil jwtUtils;

    @Autowired
    private UserService userService;


    //    注册人脸
    @PostMapping("/addface")
    public Result addFace(UserFaceDto userFaceDto,
                          MultipartFile file
    ) throws JSONException {

//        System.out.println(userFaceDto.getGroupId());
//        System.out.println(userFaceDto.getUserId());
//        System.out.println(userFaceDto.getUserInfo());
//        System.out.println(file);


        String data = faceService.addFace(userFaceDto.getGroupId(), userFaceDto.getUserId(), userFaceDto.getUserInfo(), file);
        if (data != null) {
            JSONObject jsonObject = JSONUtil.parseObj(data);
            String msg = jsonObject.get("error_msg").toString();
            return Result.succ(200, msg, null);
        }

        return Result.fail("上传失败！");
    }

//    搜索人脸
    @PostMapping("/searchface")
    public Result searchFace(MultipartFile file, HttpServletResponse response){

        FaceResult faceResult = faceService.searchFace(file);

        com.alibaba.fastjson.JSONObject jsonObject = faceResult.getData();
        JSONArray user_list = jsonObject.getJSONArray("user_list");
        com.alibaba.fastjson.JSONObject userJsonObjectt = user_list.getJSONObject(0);
        String userId = userJsonObjectt.getString("user_id");
        User user = userService.getById(userId);


//                生成jwt
        String jwt = jwtUtils.sign(user.getUserName(), user.getUserPwd());
        System.out.println("login="+jwt);


//        放入请求头中
        response.setHeader("Authorization",jwt);
        response.setHeader("Access-control-Expose-Headers","Authorization");

        return Result.succ(MapUtil.builder()
                .put("id",user.getUserId())
                .put("username",user.getUserName())
                .map());
//        return faceResult;


    }
}

附上结果封装类

package com.zzuli.common.lang;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result implements Serializable {       //成功主要看数据
    private int code;  //200为正常                   //失败主要看信息
    private int count;
    private String msg;
    private Object data;

//    工具类
    public static Result succ (int code, String msg, Object data,Integer count){
        Result r = new Result();
        r.setCode(code);
        r.setMsg(msg);
        r.setData(data);
        r.setCount(count);
        return r;
    }
    public static Result succ (int code, String msg, Object data){
        Result r = new Result();
        r.setCode(code);
        r.setMsg(msg);
        r.setData(data);
        return r;
    }
//    再封装一层
    public static Result succ(Object data){
        return succ(200,"操作成功！",data);
    }
    public static Result succ(Object data,Integer count){
        return succ(200,"操作成功！",data,count);
    }

    public static Result fail (String msg){
        return fail(msg,null);
    }

    public static Result fail (String msg, Object data){
        return fail(400,msg,data);
    }

    public static Result fail (int code, String msg, Object data){
        Result r = new Result();
        r.setCode(code);
        r.setMsg(msg);
        r.setData(data);
        return r;
    }
}

二、前端

2.1、人脸注册

其中图片是跟用户信息一块传到后端的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
		<style>
			body {
				background-color: #ffffff;
			}
		</style>
	</head>
	<body>
		<div class="layui-form layuimini-form">

			<!--  -->

			<div class="layui-form-item">
				<label class="layui-form-label required">用户ID</label>
				<div class="layui-input-block">
					<input type="text" name="userId" id="userId" value="" lay-verify="required" lay-reqtext="用户ID不能为空"
						  placeholder="请输入用户ID" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label required">组别</label>
				<div class="layui-input-block">
					<input type="text" name="groupId" id="groupId" lay-verify="required" lay-reqtext="组别不能为空"
						placeholder="请输入组别" value="test" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label required">用户资料</label>
				<div class="layui-input-block">
					<input type="text" name="userInfo" id="userInfo" lay-verify="required" lay-reqtext="用户资料不能为空"
						placeholder="请输入用户资料" value="" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item layui-form-text">
			        <label class="layui-form-label">图片上传:</label>
			        <div class="layui-input-block">
			            <div class="layui-upload">
			                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;padding:10px 0 10px 0; ">
			                  <div class="layui-upload-list" id="img_upload"></div>
			               </blockquote>
			               <button type="button" class="layui-btn"  style="background-color:#4383d3" id="img_upload_btn">添加图片</button> 
			            </div>
			            <button id="hideUpload" type="button" style="display: none"></button>
			        </div>
			    </div>
			
			

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-normal" id="save" lay-submit lay-filter="saveBtn">确认保存</button>
				</div>
			</div>
		</div>
		</div>
		<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<script>
			layui.use(['form'], function() {
				var form = layui.form,
					layer = layui.layer,
					upload = layui.upload,
					$ = layui.$;
					
				var request = new Object();
				request = GetRequest();
				var userId = request['userId'];
				
				

				layer.ready(function() {
					
					layer.msg('很高兴一开场就见到你');

					$("#userId").attr("value", userId);

				});

				

				// 监听提交
				form.on('submit(saveBtn)', function(data) {
					// var index = layer.alert("确认修改么？", {
					// 	title: '最终的提交信息'
					// }, function() {
						
					// 	console.log(data)
						// $.ajax({
						// 	url: "http://127.0.0.1:8081/face/addface",
						// 	method: "post",
						// 	data: data.field,
						// 	dataType: "json",
							// success: function(data) {
							// 	if (data.code == 200) {
									
							// layer.msg(data.msg, {icon:1,time:1500, shade:0.4}, function (){
									// layer.close(index);
							// 		iniTab.deleteCurrentByIframe();
							// 	  });
							// 		// 表示添加成功
							// 		// 关闭模态框
							// 		// 刷新页面
							// 		userTab.reload(options);
							// 		// 弹出添加成功的提示
									

							// 	}else{
							// 		//表示添加失败
							// 		layer.msg(data.msg);
							// 	}
							
							// }
						// });

						// 关闭弹出层
						// layer.close(index);

						// var iframeIndex = parent.layer.getFrameIndex(window.name);
						// parent.layer.close(iframeIndex);
						
						// window.parent.location.reload(); //提交成功后,刷新界面
						// })
					

					return false;
					
				});
				
				//多图片上传
				        upload.render({
				            elem: '#img_upload_btn'         //绑定点击按钮
				            ,url: 'http://127.0.0.1:8081/face/addface'     //访问后台路径
				            ,multiple: false                 //确认上传多张图片
				            ,accept: 'images'               //图片格式
				            ,number: 6                      //最大上传图片数量
				            ,auto:false                     //取消自动上传
				            ,method: 'post'                 //请求上传的 http 类型
				            ,bindAction:'#save'       //绑定真正的上传按钮
							,headers: {
								"Authorization": localStorage.token
							}
				            ,data:{                         //访问后台提交的数据
				                userId:()=>{
				                    return $('#userId').val();//官方文档说明：实现动态传值
				                },
				                groupId:()=>{
				                    return $('#groupId').val()
				                },
								userInfo:()=>{
									return $('#userInfo').val()
								}
								
				            }
				            ,choose: function(obj){
				                //预读本地文件示例，不支持ie8
				                obj.preview(function(index, file, result){
									
				                    $('#img_upload').append('<img  src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"  style="width:300px;height:400px">');
				                });
				            }
				            ,done: function(res){
								console.log(res)
								if(res.code == 200){
									layer.msg(res.msg, {icon:1,time:1500, shade:0.4}, function (){
											// layer.close(index);
											var iframeIndex = parent.layer.getFrameIndex(window.name);
											parent.layer.close(iframeIndex);
										  });
								}else{
									layer.msg(res.msg)
								}
							
								
							
				            }
				      
				    });
					
					
					
					function GetRequest() {
						var url = location.search; //获取url中"?"符后的字串  
						var theRequest = new Object();
						if (url.indexOf("?") != -1) {
							var str = url.substr(1);
							strs = str.split("&");
							for (var i = 0; i < strs.length; i++) {
								theRequest[strs[i].split("=")[0]] = decodeURI(unescape(strs[i].split("=")[1]));
							}
						}
						return theRequest;
					}
					

			});
			
			
		</script>
	</body>
</html>

效果图

2.2、人脸识别登录页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
<title>Insert title here</title>
	<style type="text/css">
	 	/**解决浏览器兼容性问题**/
		*{margin: 0;padding: 0;}
		html,body{width: 100%;height: 100%;}/**/
		body{background: url(../../images/keji.jpeg) no-repeat center;}
		h1{color: #fff;text-align: center;line-height: 80px;}
		.media{width: 600px;height: 400px;margin: 40px auto 0;
				}
		#canvas{display: none;}
		#logbtn{
			margin: 0 auto;
			text-align: center;
			width: 500px;
		}
		
	</style>
</head>
<body>
	<h1>百度云人脸登录</h1>
	
	<div class="media">
		<video id="video" width="600" height="500" src="" autoplay></video>
		<canvas id="canvas" width="450" height="300"></canvas>
	</div>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	
	
	<div id="logbtn"> <button type="button" class="layui-btn layui-btn-fluid" id="login">确定登录</button></div>
	
	<script type="text/javascript" src="../../lib/layui-v2.6.3/layui.js"></script>
	<script type="text/javascript">
		
layui.use(['form','jquery'], function () {
	var $ = layui.jquery,
		form = layui.form,
		layer = layui.layer;
		
	/**调用摄像头，获取媒体视频流**/
	var video = document.getElementById('video');
	//返回画布二维画图环境
	var userContext = canvas.getContext("2d");
	var getUserMedia = 
		//浏览器兼容,表示在火狐、Google、IE等浏览器都可正常支持
		(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
		//getUserMedia.call(要调用的对象，约束条件，调用成功的函数，调用失败的函数)
		getUserMedia.call(navigator,{video: true,audio: false},function(localMediaStream){
			//获取摄像头捕捉的视频流
			video.srcObject=localMediaStream;
		},function(e){
			console.log("获取摄像头失败！！")
		});
	//点击按钮注册事件
	 var btn = document.getElementById("login");
	
		btn.onclick = function () {
			CatchCode();

           
       } 
	   function dataURItoBlob (base64Data) {
	           var byteString;
	           if (base64Data.split(',')[0].indexOf('base64') >= 0)
	               byteString = atob(base64Data.split(',')[1]);
	           else
	               byteString = unescape(base64Data.split(',')[1]);
	           var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
	           var ia = new Uint8Array(byteString.length);
	           for (var i = 0; i < byteString.length; i++) {
	               ia[i] = byteString.charCodeAt(i);
	           }
	           return new Blob([ia], {type: mimeString});
	       };
	   
	       //定时器
	       //var interval = setInterval(CatchCode, "300");
	       
	       
	       function CatchCode() {
	           var canvans = document.getElementById("canvas");
	           var video = document.getElementById("video");
	           var context = canvas.getContext("2d");
	   
	           canvas.width = video.videoWidth;
	           canvas.height = video.videoHeight;
	           context.drawImage(video,0,0);
	   
	           var base64Data = canvans.toDataURL("image/jpeg", 0.3);
	           //封装blob对象
	           var blob = dataURItoBlob(base64Data);//后台可以直接用MultipartFile来接收
	   
	           var formdata = new FormData();
	           formdata.append("file", blob);
	   
	           $.ajax({
	               url: "http://localhost:8081/face/searchface/",
				   xhrFields:{
				   	withCredentials:true//允许带上cookies
				   },
	               type: "post",
	               data:formdata,
	               processData: false,
	               contentType: false,
	               success: function (res,xhr,response) {     
					   var token = response.getResponseHeader("Authorization")  //这里不跟layui的一样
					   
					   if(token == null){
						     layer.msg(res.msg)
					   }else{
						 
						   localStorage.token = token
						   layer.msg('登录成功', function () {
						   	
						       window.location = '../../index.html?username='+res.data.username;
						   }); 
					   }
					 
					 
	                   console.log(res);
	               },
	               error:function(err){
	                   alert("服务器错误");
	               }
	           });
	       }
		   
});
	 
	</script>
</body>
</html>

效果图

三、测试

标签：人脸识别,String,AI,data,face,人脸,import,com,public
来源： https://blog.csdn.net/niulinbiao/article/details/119001538

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。