人脸识别系统_人脸注册

￡神魔★判官ぃ 2022-05-29 09:19 478阅读 0赞 
  1. 基于上次的人脸检测后，一直纠结人脸注册，照片存放方式，我想到了两种方式，1.数据库存照片存放的路径，2.数据库存放照片的二进制码。但是针对我的毕业设计我想要是存路径的话，万一一不小心图片删除了，岂不是很麻烦，也就是我觉得要是系统迁移的话容易数据丢失（小白想法，其实正常情况下都是直接存的图片路径）。直接存照片的话数据库压力，开销等都比较大。所以最终小白还是选择了存图片路径的方式。
  3. 其实吧，我上面都想多了，百度云早就想好了，在你调用注册的时候他就帮你存图片在百度云上了。接口返回该照片的uid唯一标识。我们只需要记住该uid即可。

前端html

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  3. <!DOCTYPE HTML>
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <meta http-equiv="Content-Type" content="multipart/form-data; charset=UTF-8">
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
  9. <title>人脸检测</title>
  10. <script src="bank_resource/jquery.min.js" type="text/javascript" charset="utf-8"></script>    
  11. <title>人脸检测</title>
  12. <script src="bank_resource/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  14. <script src="bank_resource/main.js" type="text/javascript" charset="utf-8"></script>
  16. <style> 
  17. .div-a{ float:left;width:100%;height:49%;border:1px solid #F00} 
  18. #img{
  19.     width: 100%;
  20.     height: 100%;
  21.     display: none;
  22. }
  23. span{ font-size:25px }
  24. </style> 
  25. </head> 
  26. <body>  
  27.     <div class="div-a" id="contentHolder">
  28.         <input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
  29.         <input type="button" id="btnres" style="width:100px;height:35px;" value="重新拍照" />
  30.         <input type="button" onclick="CatchCode();" style="width:100px;height:35px;" value="上传服务器" />
  31.         <video id="video" width="100%" height="100%" autoplay></video>
  32.         <canvas style="" hidden="hidden"  id="canvas" width="520" height="250"></canvas>
  33.         <img id='img' src=''>
  34.     </div> 
  35. </body>

js部分 main.js

  1. //判断浏览器是否支持HTML5 Canvas
  2.     window.onload = function () {
  3.         try {
  4.         //动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持 document.createElement("canvas").getContext("2d");
  5.          //document.getElementById("support").innerHTML = "浏览器支持HTML5 CANVAS";
  6.         }
  7.         catch (e) {
  8.         // document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS";
  9.         }
  10.     }; 
  11.     var mediaStreamTrack,video,videoObj,errBack;
  12.     /**  jQ加载函数  */
  13.     $(function(){
  14.         $("#btnres").click(fnResetPhotoGraph);
  15.         // 初始化
  16.         var canvas = document.getElementById("canvas"),
  17.         context = canvas.getContext("2d");
  18.         video = document.getElementById("video"),
  19.         videoObj = { "video": true },
  20.         errBack = function (error) {
  21.             console.log("Video capture error: ", error.code);
  22.         };
  23.         //拍照按钮
  24.          $("#snap").click(function (){
  25.              fnPhotoGraph(context,canvas);
  26.          });
  27.         // 打开摄像头
  28.          fnOpenVideo(video,videoObj,errBack);
  29.     });
  30.     /**  拍照  */
  31.     function fnPhotoGraph(context,canvas){
  32.         context.drawImage(video, 0, 0, 330, 250); 
  33.         var img = document.getElementById('img');
  34.         img.src = canvas.toDataURL("image/png");
  35.         $("#img,#btnres").show();
  36.         $("#video,#snap").hide();
  37.         fnCloseVideo();
  38.         CatchCode();        
  39.     }
  41.     /**  重新拍照  */
  42.     function fnResetPhotoGraph(){
  43.         $("#video,#snap").show();
  44.         $("#img,#btnres").hide();
  45.         fnOpenVideo(video,videoObj,errBack);
  46.         $(".msg").html("");
  47.     }
  49.     /** 打开摄像头
  50.     */
  51.     function fnOpenVideo(video,videoObj,errBack){
  52.         if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
  53.             navigator.getUserMedia=navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  55.             navigator.getUserMedia(videoObj, function (stream) {
  56.                 mediaStreamTrack = stream;
  57.                 video.srcObject  = stream;
  58.                 video.play();
  59.             }, errBack);
  60.         }
  61.     }
  63.     /**
  64.         关闭摄像头
  65.     */
  66.     function fnCloseVideo(){
  67.         mediaStreamTrack.getTracks().forEach(function (track) {
  68.             track.stop();
  69.         });
  70.     }
  72.     function dataURItoBlob(base64Data) {
  73.         var byteString;
  74.         if (base64Data.split(',')[0].indexOf('base64') >= 0)
  75.         byteString = atob(base64Data.split(',')[1]);
  76.         else
  77.         byteString = unescape(base64Data.split(',')[1]);
  78.         var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
  79.         var ia = new Uint8Array(byteString.length);
  80.         for (var i = 0; i < byteString.length; i++) {
  81.         ia[i] = byteString.charCodeAt(i);
  82.         }
  83.         return new Blob([ia], {type:mimeString});
  84.     }
  86.     //上传服务器
  87.     function CatchCode() {
  88.         var canvans = document.getElementById("canvas");
  89.         //获取浏览器页面的画布对象
  90.         //以下开始编 数据
  91.         var imageBase64 = canvans.toDataURL();
  92.         var blob = dataURItoBlob(imageBase64);
  93.         var fd = new FormData(document.forms[0]);
  94.         fd.append("photo", blob, 'image.png');
  95.         //将图像转换为base64数据
  96.         $.ajax({
  97.                type:"POST",
  98.                url:"http://localhost:8080/desing/faceRecognition/registerFace.do",
  99.                processData: false,     // 必须
  100.               contentType: false,     // 必须
  101.               data:fd,
  102.             datatype: "json",
  103.                success:function(data){
  104.                    var mes = eval(data);
  105.                    if (mes.success) { 
  106.                        var ok  = confirm("注册成功是否继续注册？","继续注册","放弃继续注册");
  107.                        if(ok){
  108.                            fnResetPhotoGraph();
  109.                        } else {
  110.                            fnCloseVideo();
  111.                        }
  112.                    }
  113.                },
  114.                error: function(){
  115.                 //请求出错处理
  116.                 alert("加载异常!");
  117.             }         
  118.           });
  119.     }

后端action部分：

  1. package com.xihua.facedistinguish.action;
  3. import java.io.ByteArrayOutputStream;
  4. import java.io.IOException;
  5. import java.io.InputStream;
  6. import java.io.OutputStream;
  7. import java.sql.SQLException;
  8. import java.util.HashMap;
  9. import java.util.List;
  10. import java.util.Map;
  12. import javax.annotation.Resource;
  13. import javax.servlet.http.HttpServletRequest;
  14. import javax.servlet.http.HttpServletResponse;
  16. import net.sf.json.JSONObject;
  18. import org.springframework.stereotype.Controller;
  19. import org.springframework.web.bind.annotation.RequestMapping;
  20. import org.springframework.web.bind.annotation.RequestParam;
  21. import org.springframework.web.bind.annotation.ResponseBody;
  22. import org.springframework.web.multipart.MultipartFile;
  23. import org.springframework.web.servlet.ModelAndView;
  25. import com.xihua.facedistinguish.entity.PhotoImage;
  26. import com.xihua.facedistinguish.service.RegisterService;
  28. /**
  29.  * 人脸识别服务 controller
  30.  * @author cc_小白成长
  31.  *
  32.  */
  33. @Controller
  34. @RequestMapping(value = "faceRecognition")
  35. public class FaceRecognitionAction {
  36.     @Resource 
  37.     private RegisterService registerService;
  39.     /**
  40.         * 请求人脸注册
  41.         * @return
  42.         * @throws Exception  
  43.         */
  44.     @RequestMapping(value = "/registerFace.do")
  45.     @ResponseBody
  46.     public Map<String, Object> registerFace(@RequestParam("photo") MultipartFile file) {
  47.         Map<String, Object> modelMap = new HashMap<String, Object>();
  48.         try {
  49.             //将数据转为流
  50.             InputStream content = file.getInputStream();
  51.             ByteArrayOutputStream swapStream = new ByteArrayOutputStream();  
  52.             byte[] buff = new byte[100];  
  53.             int rc = 0;  
  54.             while ((rc = content.read(buff, 0, 100)) > 0) {  
  55.                 swapStream.write(buff, 0, rc);  
  56.             }  
  57.             //获得二进制数组
  58.             byte[] in2b = swapStream.toByteArray(); 
  59.             //调用人脸检测的方法
  60.             PhotoImage phi =  FaceDetect.add(in2b);
  61.             // 调用自己的service方法，该方法是存图片信息到自己的数据库，目前你可以不用使用。
  62.             //registerService.insert(phi);
  63.             modelMap.put("success", true);
  64.         } catch (Exception e) {
  65.             modelMap.put("success", false);
  66.             modelMap.put("data", e.getMessage());
  67.         }
  68.         return modelMap;
  69.     }
  71. }

FaceDetect.java

  1. /**
  2. * 人脸探测
  3. * @author cc_小白成长
  4. * @data 2017-11-15
  5. */
  6. public class FaceDetect {
  7.      /**
  8.      *  
  9.      * 人脸注册
  10.      *  针对数据库直接存照片二进制情况
  11.      * @param in2b 照片二进制信息
  12.      * @return 返回封装的人脸信息
  13.      */
  14.      @SuppressWarnings("static-access")
  15.     public static PhotoImage add(byte [] in2b) {
  16.          // 请求url
  17.          String url = "https://aip.baidubce.com/rest/2.0/face/v2/faceset/user/add";
  18.          try { 
  19.              String imgStr = Base64Util.encode(in2b);
  20.              String imgParam = URLEncoder.encode(imgStr, "UTF-8");
  23.          //uid ，user_info，group_id可以自行修改

String param = “uid=” + “atm_user” + “&user_info=” + “userInfo” + “&group_id=” + “atm_group” + “&images=” + imgParam;

// 注释0 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间， 客户端可自行缓存，过期后重新获取。

String accessToken = “24.4baee8523e77221d4d808ecbcca53355.2592000.1524188239.282335-10949124”; //FaceUtil.getAuth();//“请设置您的token”; String result = HttpUtil.post(url, accessToken, param); PhotoImage phi = null; JSONObject js = new JSONObject().fromObject(result); if(js.get(“error_code”) == null){ phi.setHp_id(js.getString(“log_id”)); phi.setHp_photo(in2b); } return phi; } catch (Exception e) { e.printStackTrace(); } return null; } /** * * 人脸注册 * 针对数据库存照片路径的情况 * @param imgurl 照片存放的路径 * @return 返回封装的人脸信息 */ @SuppressWarnings(“static-access”) public static PhotoImage add(String imgurl) { // 请求url String url = “https://aip.baidubce.com/rest/2.0/face/v2/faceset/user/add“; try { // 本地文件路径 String filePath = imgurl; byte[] imgData = FileUtil.readFileByBytes(filePath); String imgStr = Base64Util.encode(imgData); String imgParam = URLEncoder.encode(imgStr, “UTF-8”); //uid ，user_info，group_id可以自行修改
String param = “uid=” + “atm_user” + “&user_info=” + “userInfo” + “&group_id=” + “atm_group” + “&images=” + imgParam;

// 注释0 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间， 客户端可自行缓存，过期后重新获取。

String accessToken = “24.4baee8523e77221d4d808ecbcca53355.2592000.1524188239.282335-10949124”; //FaceUtil.getAuth();//“请设置您的token”; String result = HttpUtil.post(url, accessToken, param); PhotoImage phi = null; JSONObject js = new JSONObject().fromObject(result); if(js.get(“error_code”) == null){ phi.setHp_id(js.getString(“log_id”)); phi.setHp_photo(imgData); } return phi; } catch (Exception e) { e.printStackTrace(); } return null; }}

PhotoImage.java 按照自己数据库设计实现

  1. public class PhotoImage {
  2.     private String hp_id;
  3.     private String hp_name;
  4.     private byte [] hp_photo;
  5.     private String imgurl;
  6. ....... get/set/toSting/构造方法等
  7. }

以上测试通过。

![Image 1][]

在登陆自己的百度云账号查看存储的照片信息

![Image 1][]

![Image 1][]

那么问题来了

1.这里不应该一个人重复注册，接下来学习人脸对比。

2.我还是不想把图片存在百度云中，最终的目的是使用人脸登陆所有信息存在自己数据库服务器中。

欢迎大家相互学习。如有bug请直接指出。谢谢。

[Image 1]:

发表评论

表情：
评论列表 （有 0 条评论，478人围观）

还没有评论，来说两句吧...

相关阅读

    相关 MATLAB人脸识别系统

    MATLAB人脸识别系统 1 人脸识别技术 人脸因人而异，绝无相同，即使一对双胞胎，其面部也一定存在着某方面的差异。虽然人类在表情、年龄或发型等发生巨大变化的情况下，可以毫

    怼烎@怼烎@/ 0 赞/ 401 阅读

    相关 人脸识别

    计划 实现了一个基于 PCA 的人脸识别 方法 ，我 称之为 “ 特征点方法 ”， 所有的功能简单而且实用 。 下面，我使用一个简单的MATLAB脚本 说明 它的用法

    ╰半夏微凉°╰半夏微凉°/ 0 赞/ 523 阅读

    相关 人脸识别

    人脸检测 [长文干货！走近人脸检测：从 VJ 到深度学习（上）][VJ] [长文干货！走近人脸检测：从VJ到深度学习（下）][VJ 1]

    朱雀朱雀/ 0 赞/ 470 阅读

    相关 人脸识别系统_人脸注册

        基于上次的人脸检测后，一直纠结人脸注册，照片存放方式，我想到了两种方式，1.数据库存照片存放的路径，2.数据库存放照片的二进制码。但是针对我的毕业设计我想要是存路径的话

    ￡神魔★判官ぃ￡神魔★判官ぃ/ 0 赞/ 479 阅读

    相关 人脸识别系统_人脸检测

    项目：基于人脸识别的无卡ATM机模拟系统 主要实现内容： 包括实现AMT机模拟人脸识别和密码输入、PC端模拟实现储户数据库服务器系统。 1. ATM模拟端实现采用手

    亦凉亦凉/ 0 赞/ 482 阅读