人脸识别系统_人脸检测

亦凉 2022-05-29 06:44 477阅读 0赞

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

  1. ATM模拟端实现采用手机APP模拟实现：摄像头拍照、密码输入、取款操作流程的模拟；
  2. ATM机端把人脸信息和密码信息等通过网络传输到PC服务器端进行人脸识别、密码认证以及取款操作；
  3. PC服务器实现人脸识别、利用数据库信息进行人脸比对、密码认证、账户信息查询和取款等操作。
  4. 储户开户时，需要提供人脸采集信息和初始密码录入，并保存到PC数据库服务器。
  5. UI设计：模拟ATM机取款操作过程简单明了。
  6. PC服务端功能菜单齐全。

对于小白我来说，这ATM还好，可是人脸识别没有使用过啊，这就尴尬了，但是我们不能屈服啊，不能为了他花钱外包把（其实把，我穷，穷。。。），所以自己从头开始把。
第一天既然是人脸识别，那我就百度把，边实践边学习。先弄个人脸检测咯。
第一步下载相关文档，

重要提示代码中所需工具类
FileUtil,Base64Util,HttpUtil,GsonUtils请从
https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3
下载

jQury文件
jquery.min.js

第二步开始写前端代码，略丑

html部分

  1. <style> 
  2. .div-a{ float:left;width:49%;height:49%;border:1px solid #F00} 
  3. .div-b{ float:right;width:49%;height:49%;border:1px solid #000;} 
  4. #img{
  5.     width: 100%;
  6.     height: 100%;
  7.     display: none;
  8. }
  9. span{ font-size:25px }
  10. </style> 
  11. </head> 
  12. <body> 
  13.     <!-- 左边区域 -->
  14.     <div class="div-a" id="contentHolder">
  15.         <video id="video" width="100%" height="100%" autoplay></video>
  16.         <canvas style="" hidden="hidden"  id="canvas" width="520" height="250"></canvas>
  17.         <img id='img' src=''>
  18.     </div> 
  19.     <!-- 右边区域 -->
  20.     <div class="div-b" >
  21.             <!-- 测试按钮 -->
  22.         <input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
  23.         <input type="button" id="btnres" style="width:100px;height:35px;" value="重新拍照" />
  24.         <input type="button" onclick="CatchCode();" style="width:100px;height:35px;" value="上传服务器" />
  26.         <h1>人脸检测实时数据</h1>
  27.         <span>年龄：</span><span id="age"></span><br/>
  28.         <span>颜值：</span><span id="beauty" ></span><br/>
  29.         <span>性别：</span><span id="sex"></span><br/>
  30.         <span>是否戴眼镜:</span><span id="glasses"></span><br/>
  31.         <span>表情：</span><span id="expression"></span><br/>
  32.     </div> 
  33. </body>

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.     function fnOpenVideo(video,videoObj,errBack){
  51.         if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
  52.             navigator.getUserMedia=navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  53.            //注意：打开摄像头重点
  54.             navigator.getUserMedia(videoObj, function (stream) {
  55.                 mediaStreamTrack = stream;
  56.                 video.srcObject  = stream;
  57.                 video.play();
  58.             }, errBack);
  59.         }
  60.     }
  62.     /**
  63.         关闭摄像头
  64.     */
  65.     function fnCloseVideo(){
  66.     //注意关闭摄像头重点
  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://你的路径/faceRecognition/save.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 jsonObj = JSON.parse(mes.strjson); 
  107.                        var age = jsonObj.age;
  108.                        var beauty = jsonObj.beauty;
  109.                        var gendergender = jsonObj.gender;
  110.                        var glasses = jsonObj.glasses;
  111.                        var expression = jsonObj.expression
  113.                        $("#age").html(age);
  114.                        $("#beauty").html(beauty);
  116.                        if(gendergender == 'male'){
  117.                            $("#sex").html("男");
  118.                        }else{
  119.                            $("#sex").html("女");
  120.                        }
  122.                        if(glasses == '0'){
  123.                            $("#glasses").html("未戴眼镜");
  124.                        }else if(glasses == '1'){
  125.                            $("#glasses").html("戴了普通眼镜");
  126.                        }else{
  127.                            $("#glasses").html("戴了墨镜");
  128.                        }
  130.                        if(expression == '0'){
  131.                            $("#expression").html("不笑");
  132.                        }else if(expression == '1'){
  133.                            $("#expression").html("微笑");
  134.                        }else{
  135.                            $("#expression").html("大笑");
  136.                        }
  137.                    }
  138.                },
  139.                error: function(){
  140.                 //请求出错处理
  141.                 alert("加载异常!");
  142.             }         
  143.           });
  144.     }

这里写图片描述
这里写图片描述

" class="reference-link">这里写图片描述

//后台action

  1. /**
  2.  * 人脸识别服务 controller
  3.  * @author cc_小白成长
  4.  *
  5.  */
  6. @Controller
  7. @RequestMapping(value = "faceRecognition")
  8. public class FaceRecognitionAction {
  9.     /**
  10.         * 请求人脸检测
  11.         * @return
  12.         * @throws Exception  
  13.         */
  14.     @RequestMapping(value = "/save.do")
  15.     @ResponseBody
  16.     //注意：遇到ajax上传文件出错（*2*注意导jar文件，或者使用表单设置enctype=multipart/form-data）
  17.     public Map<String, Object> queryService(@RequestParam("photo") MultipartFile file) {
  18.         Map<String, Object> modelMap = new HashMap<String, Object>();
  19.         try {
  20.             //将数据转为流
  21.             InputStream content = file.getInputStream();
  22.             ByteArrayOutputStream swapStream = new ByteArrayOutputStream();  
  23.             byte[] buff = new byte[100];  
  24.             int rc = 0;  
  25.             while ((rc = content.read(buff, 0, 100)) > 0) {  
  26.                 swapStream.write(buff, 0, rc);  
  27.             }  
  28.             //获得二进制数组
  29.             byte[] in2b = swapStream.toByteArray(); 
  30.             //调用人脸检测的方法
  31.             Map<String, String>  strmap = FaceDetect.detectby(in2b);
  32.             //将map数据封装json传到前台
  34.             //转json的方法
  35.             JSONObject mapObject=JSONObject.fromObject(strmap);
  36.             //2、JSONArray
  37.            /* JSONArray mapArray=JSONArray.fromObject(strmap);*/
  38.             modelMap.put("strjson", mapObject.toString());
  39.             modelMap.put("success", true);
  40.         } catch (Exception e) {
  41.             modelMap.put("success", false);
  42.             modelMap.put("data", e.getMessage());
  43.         }
  44.         return modelMap;
  45.     }
  46. }

//封装工具

  1. /**
  2. * 人脸探测
  3. * @author cc_小白成长
  4. * @data 2017-11-15
  5. */
  6. public class FaceDetect {
  7.      public static  Map<String, String> detectby(byte[] arg0) {
  8.             Map<String, String> map = new HashMap<String,String>();
  9.             // 请求url
  10.             String url = "https://aip.baidubce.com/rest/2.0/face/v1/detect";
  11.             try {
  12.                 // 图片数据
  13.                 String imgStr = Base64Util.encode(arg0);
  14.                 String imgParam = URLEncoder.encode(imgStr, "UTF-8");
  15.                 String param = "max_face_num=" + 1 + "&face_fields=" + "age,beauty,expression,faceshape,"
  16.                         + "gender,glasses,landmark,race,qualities" + "&image=" + imgParam;
  17.                 // 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间， 客户端可自行缓存，过期后重新获取。
  18.                 //没有网络使用24.9a7e8fe6a106b341907e5862abf40fe7.2592000.1523977179.282335-124328
  19.                 String accessToken = FaceUtil.getAuth();//"请设置您的token";
  20.                // String accessToken = "24.9a7e8fe6a106b341907e5862abf40fe7.2592000.1523977179.282335-124328";
  21.                 String str = HttpUtil.post(url, accessToken, param);
  22.                 System.out.println(str);
  24.                  JSONObject jsonobject = JSONObject.fromObject(str);
  25.                  String result = jsonobject.getString("result");
  27.                  JSONArray json = JSONArray.fromObject(result); // 首先把字符串转成 JSONArray  对象
  28.                   for(int i=0;i<json.size();i++){
  29.                         JSONObject job = json.getJSONObject(i);  // 遍历 jsonarray 数组，把每一个对象转成 json 对象
  31.                         //获取年龄
  32.                         Double ageOne = (Double) job.get("age");
  33.                          //处理年龄
  34.                         String age =String.valueOf(new BigDecimal(ageOne).setScale(0, BigDecimal.ROUND_HALF_UP));
  35.                         map.put("age", age);
  37.                         //获取美丑打分
  38.                         Double beautyOne = (Double) job.get("beauty");
  39.                         //处理美丑打分
  40.                          String beauty =String.valueOf(new BigDecimal(beautyOne).setScale(0, BigDecimal.ROUND_HALF_UP));
  41.                         map.put("beauty", beauty);
  43.                         //获取性别  male(男)、female(女)
  44.                         String gender = (String) job.get("gender");
  45.                         map.put("gender", gender);
  47.                         //获取是否带眼睛 0-无眼镜，1-普通眼镜，2-墨镜
  48.                         Integer glasses = (Integer) job.get("glasses");
  49.                         map.put("glasses", String.valueOf(glasses));
  51.                         //获取是否微笑，0，不笑；1，微笑；2，大笑
  52.                         Integer expression = (Integer) job.get("expression");
  53.                         map.put("expression", String.valueOf(expression));
  54.                  }
  56.                 return map;
  57.             } catch (Exception e) {
  58.                 e.printStackTrace();
  59.                 return null;
  60.             }
  61.         }
  62. }

//获取密钥

  1. /**
  2.  * 人脸识别获取用户的accessToken
  3.  * @author cc_小白成长
  4.  *
  5.  */
  6. public class FaceUtil {
  7.     //***注意：遇到小困难，百度云ak，sk的获取（1）***
  8.     private static final String AK = "9d1vSqEfx9HHOgnRGP3QOVpT";
  9.     private static final String SK = "MNQHeH7gT0n2VQcKw7zxwUkSI9eX6BD1";
  11.      /**
  12.      * 获取权限token
  13.      * @return 返回示例：
  14.      * {
  15.      * "access_token": "24.460da4889caad24cccdb1fea17221975.2592000.1491995545.282335-1234567",
  16.      * "expires_in": 2592000
  17.      * }
  18.      */
  19.     public static String getAuth() {
  20.         // 官网获取的 API Key 更新为你注册的--百度云应用的AK
  21.         String clientId = AK;
  22.         // 官网获取的 Secret Key 更新为你注册的--百度云应用的SK
  23.         String clientSecret = SK;
  24.         return getAuth(clientId, clientSecret);
  25.     } 
  26.     /**
  27.      * 获取API访问token
  28.      * 该token有一定的有效期，需要自行管理，当失效时需重新获取.
  29.      * @param ak - 百度云官网获取的 API Key
  30.      * @param sk - 百度云官网获取的 Securet Key
  31.      * @return assess_token 示例：
  32.      * "24.460da4889caad24cccdb1fea17221975.2592000.1491995545.282335-1234567"
  33.      */
  34.     public static String getAuth(String ak, String sk) {
  35.         // 获取token地址
  36.         String authHost = "https://aip.baidubce.com/oauth/2.0/token?";
  37.         String getAccessTokenUrl = authHost
  38.                 // 1. grant_type为固定参数
  39.                 + "grant_type=client_credentials"
  40.                 // 2. 官网获取的 API Key
  41.                 + "&client_id=" + ak
  42.                 // 3. 官网获取的 Secret Key
  43.                 + "&client_secret=" + sk;
  44.         try {
  45.             URL realUrl = new URL(getAccessTokenUrl);
  46.             // 打开和URL之间的连接
  47.             HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();
  48.             connection.setRequestMethod("GET");
  49.             connection.connect();
  50.             // 获取所有响应头字段
  51.             Map<String, List<String>> map = connection.getHeaderFields();
  52.             // 遍历所有的响应头字段
  53.             /*for (String key : map.keySet()) {
  54.                 System.out.println(key + "--->" + map.get(key));
  55.             }*/
  56.             // 定义 BufferedReader输入流来读取URL的响应
  57.             BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
  58.             String result = "";
  59.             String line;
  60.             while ((line = in.readLine()) != null) {
  61.                 result += line;
  62.             }
  63.             /**
  64.              * 返回结果示例
  65.              */
  66.             JSONObject jsonObject = new JSONObject(result);
  67.             String access_token = jsonObject.getString("access_token");
  68.             return access_token;
  69.         } catch (Exception e) {
  70.             System.err.printf("获取token失败！");
  71.             e.printStackTrace(System.err);
  72.         }
  73.         return null;
  74.     }
  75.     public static void main(String[] args) {
  76.         getAuth();
  77.     }
  78. }

以上测试通过。
在此次学习中有四个地方耗时最多（***四个注意***地方）
欢迎大家相互学习。如有bug请直接指出。谢谢。

发表评论

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

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

相关阅读

    相关 iOS 人脸识别(检测)

    本文用的是系统自带的人脸识别功能，跟扫二维码条形码是一样的，但是系统只能识别出这是人的脸，至于高级的判断这张脸是谁的，需要更高级的第三方库了。 这里是检测到有人脸，然后三秒后

    约定不等于承诺〃约定不等于承诺〃/ 0 赞/ 361 阅读

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

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

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

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

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

    亦凉亦凉/ 0 赞/ 478 阅读