人臉識別系統_人臉檢測

阿新 • • 發佈：2019-01-02

專案：基於人臉識別的無卡ATM機模擬系統
主要實現內容：
包括實現AMT機模擬人臉識別和密碼輸入、PC端模擬實現儲戶資料庫伺服器系統。
1. ATM模擬端實現採用手機APP模擬實現：攝像頭拍照、密碼輸入、取款操作流程的模擬；
2. ATM機端把人臉資訊和密碼資訊等通過網路傳輸到PC伺服器端進行人臉識別、密碼認證以及取款操作；
3. PC伺服器實現人臉識別、利用資料庫資訊進行人臉比對、密碼認證、賬戶資訊查詢和取款等操作。
4. 儲戶開戶時，需要提供人臉採集資訊和初始密碼錄入，並儲存到PC資料庫伺服器。
5. UI設計：模擬ATM機取款操作過程簡單明瞭。
6. PC服務端功能選單齊全。

第二步開始寫前端程式碼，略醜

html部分

<style> 
.div-a{ float:left;width:49%;height:49%;border:1px solid #F00} 
.div-b{ float:right;width:49%;height:49%;border:1px solid #000;} 
#img{
    width: 100%;
    height: 100%;
    display: none;
}
span{ font-size:25px }
</style> 
</head> 
<body> 
    <!-- 左邊區域 --> 

    <div class="div-a" id="contentHolder">
        <video id="video" width="100%" height="100%" autoplay></video>
        <canvas style="" hidden="hidden"  id="canvas" width="520" height="250"></canvas>
        <img id='img' src=''>
    </div> 
    <!-- 右邊區域 --> 

    <div class="div-b" >
            <!-- 測試按鈕 -->
        <input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
        <input type="button" id="btnres" style="width:100px;height:35px;" value="重新拍照" />
        <input type="button" onclick="CatchCode();" style="width:100px;height:35px;" value="上傳伺服器" />

        <h1>人臉檢測實時資料</h1>
        <span>年齡：</span><span id="age"></span><br/>
        <span>顏值：</span><span id="beauty" ></span><br/>
        <span>性別：</span><span id="sex"></span><br/>
        <span>是否戴眼鏡:</span><span id="glasses"></span><br/>
        <span>表情：</span><span id="expression"></span><br/>
    </div> 
</body>

js部分

//判斷瀏覽器是否支援HTML5 Canvas
    window.onload = function () {
        try {
        //動態建立一個canvas元 ，並獲取他2Dcontext。如果出現異常則表示不支援 document.createElement("canvas").getContext("2d");
         //document.getElementById("support").innerHTML = "瀏覽器支援HTML5 CANVAS";
        }
        catch (e) {
        // document.getElementByIdx("support").innerHTML = "瀏覽器不支援HTML5 CANVAS";
        }
    }; 
    var mediaStreamTrack,video,videoObj,errBack;
    /**  jQ載入函式  */
    $(function(){
        $("#btnres").click(fnResetPhotoGraph);
        // 初始化
        var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d");
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function (error) {
            console.log("Video capture error: ", error.code);
        };
        //拍照按鈕
        $("#snap").click(function (){
            fnPhotoGraph(context,canvas);
        });
        // 開啟攝像頭
        fnOpenVideo(video,videoObj,errBack);
    });
    /**  拍照  */
    function fnPhotoGraph(context,canvas){
        context.drawImage(video, 0, 0, 330, 250); 
        var img = document.getElementById('img');
        img.src = canvas.toDataURL("image/png");
        $("#img,#btnres").show();
        $("#video,#snap").hide();
        fnCloseVideo();
        CatchCode();        
    }

    /**  重新拍照  */
    function fnResetPhotoGraph(){
        $("#video,#snap").show();
        $("#img,#btnres").hide();
        fnOpenVideo(video,videoObj,errBack);
        $(".msg").html("");
    }

    /** 開啟攝像頭 */
    function fnOpenVideo(video,videoObj,errBack){
        if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            navigator.getUserMedia=navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
           //注意：開啟攝像頭重點
            navigator.getUserMedia(videoObj, function (stream) {
                mediaStreamTrack = stream;
                video.srcObject  = stream;
                video.play();
            }, errBack);
        }
    }

    /**
        關閉攝像頭
    */
    function fnCloseVideo(){
    //注意關閉攝像頭重點
        mediaStreamTrack.getTracks().forEach(function (track) {
            track.stop();
        });
    }

    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});
    }

    //上傳伺服器
    function CatchCode() {
        var canvans = document.getElementById("canvas");
        //獲取瀏覽器頁面的畫布物件
        //以下開始編 資料
        var imageBase64 = canvans.toDataURL();
        var blob = dataURItoBlob(imageBase64);
        var fd = new FormData(document.forms[0]);
        fd.append("photo", blob, 'image.png');
        //將影象轉換為base64資料
        $.ajax({
            type:"POST",
            url:"http://你的路徑/faceRecognition/save.do",
            processData: false,     // 必須
            contentType: false,     // 必須
            data:fd,
            datatype: "json",
            success:function(data){
                var mes = eval(data);
                if (mes.success) {
                    var jsonObj = JSON.parse(mes.strjson); 
                    var age = jsonObj.age;
                    var beauty = jsonObj.beauty;
                    var gendergender = jsonObj.gender;
                    var glasses = jsonObj.glasses;
                    var expression = jsonObj.expression

                    $("#age").html(age);
                    $("#beauty").html(beauty);

                    if(gendergender == 'male'){
                        $("#sex").html("男");
                    }else{
                        $("#sex").html("女");
                    }

                    if(glasses == '0'){
                        $("#glasses").html("未戴眼鏡");
                    }else if(glasses == '1'){
                        $("#glasses").html("戴了普通眼鏡");
                    }else{
                        $("#glasses").html("戴了墨鏡");
                    }

                    if(expression == '0'){
                        $("#expression").html("不笑");
                    }else if(expression == '1'){
                        $("#expression").html("微笑");
                    }else{
                        $("#expression").html("大笑");
                    }
                }
            },
            error: function(){
                //請求出錯處理
                alert("載入異常!");
            }         
        });
    }

這裡寫圖片描述

//後臺action


/**
 * 人臉識別服務 controller
 * @author cc_小白成長
 *
 */
@Controller
@RequestMapping(value = "faceRecognition")
public class FaceRecognitionAction {
    /**
     * 請求人臉檢測
     * @return
     * @throws Exception  
     */
    @RequestMapping(value = "/save.do")
    @ResponseBody
    //注意：遇到ajax上傳檔案出錯（*2*注意導jar檔案，或者使用表單設定enctype=multipart/form-data）
    public Map<String, Object> queryService(@RequestParam("photo") MultipartFile file) {
        Map<String, Object> modelMap = new HashMap<String, Object>();
        try {
            //將資料轉為流
            InputStream content = file.getInputStream();
            ByteArrayOutputStream swapStream = new ByteArrayOutputStream();  
            byte[] buff = new byte[100];  
            int rc = 0;  
            while ((rc = content.read(buff, 0, 100)) > 0) {  
                swapStream.write(buff, 0, rc);  
            }  
            //獲得二進位制陣列
            byte[] in2b = swapStream.toByteArray(); 
            //呼叫人臉檢測的方法
            Map<String, String>  strmap = FaceDetect.detectby(in2b);
            //將map資料封裝json傳到前臺

            //轉json的方法
            JSONObject mapObject=JSONObject.fromObject(strmap);
            //2、JSONArray
           /* JSONArray mapArray=JSONArray.fromObject(strmap);*/
            modelMap.put("strjson", mapObject.toString());
            modelMap.put("success", true);
        } catch (Exception e) {
            modelMap.put("success", false);
            modelMap.put("data", e.getMessage());
        }
        return modelMap;
    }
}

//封裝工具



/**
* 人臉探測
* @author cc_小白成長
* @data 2017-11-15
*/
public class FaceDetect {
     public static  Map<String, String> detectby(byte[] arg0) {
            Map<String, String> map = new HashMap<String,String>();
            // 請求url
            String url = "https://aip.baidubce.com/rest/2.0/face/v1/detect";
            try {
                // 圖片資料
                String imgStr = Base64Util.encode(arg0);
                String imgParam = URLEncoder.encode(imgStr, "UTF-8");
                String param = "max_face_num=" + 1 + "&face_fields=" + "age,beauty,expression,faceshape,"
                        + "gender,glasses,landmark,race,qualities" + "&image=" + imgParam;
                // 注意這裡僅為了簡化編碼每一次請求都去獲取access_token，線上環境access_token有過期時間， 客戶端可自行快取，過期後重新獲取。
                //沒有網路使用24.9a7e8fe6a106b341907e5862abf40fe7.2592000.1523977179.282335-124328
                String accessToken = FaceUtil.getAuth();//"請設定您的token";
               // String accessToken = "24.9a7e8fe6a106b341907e5862abf40fe7.2592000.1523977179.282335-124328";
                String str = HttpUtil.post(url, accessToken, param);
                System.out.println(str);

                JSONObject jsonobject = JSONObject.fromObject(str);
                String result = jsonobject.getString("result");

                JSONArray json = JSONArray.fromObject(result); // 首先把字串轉成 JSONArray  物件
                 for(int i=0;i<json.size();i++){
                        JSONObject job = json.getJSONObject(i);  // 遍歷 jsonarray 陣列，把每一個物件轉成 json 物件

                        //獲取年齡
                        Double ageOne = (Double) job.get("age");
                        //處理年齡
                        String age =String.valueOf(new BigDecimal(ageOne).setScale(0, BigDecimal.ROUND_HALF_UP));
                        map.put("age", age);

                        //獲取美醜打分
                        Double beautyOne = (Double) job.get("beauty");
                        //處理美醜打分
                        String beauty =String.valueOf(new BigDecimal(beautyOne).setScale(0, BigDecimal.ROUND_HALF_UP));
                        map.put("beauty", beauty);

                        //獲取性別  male(男)、female(女)
                        String gender = (String) job.get("gender");
                        map.put("gender", gender);

                        //獲取是否帶眼睛 0-無眼鏡，1-普通眼鏡，2-墨鏡
                        Integer glasses = (Integer) job.get("glasses");
                        map.put("glasses", String.valueOf(glasses));

                        //獲取是否微笑，0，不笑；1，微笑；2，大笑
                        Integer expression = (Integer) job.get("expression");
                        map.put("expression", String.valueOf(expression));
                 }

                return map;
            } catch (Exception e) {
                e.printStackTrace();
                return null;
            }
        }
}

//獲取金鑰

/**
 * 人臉識別獲取使用者的accessToken
 * @author cc_小白成長
 *
 */
public class FaceUtil {
    //***注意：遇到小困難，百度雲ak，sk的獲取（1）***
    private static final String AK = "9d1vSqEfx9HHOgnRGP3QOVpT";
    private static final String SK = "MNQHeH7gT0n2VQcKw7zxwUkSI9eX6BD1";

     /**
     * 獲取許可權token
     * @return 返回示例：
     * {
     * "access_token": "24.460da4889caad24cccdb1fea17221975.2592000.1491995545.282335-1234567",
     * "expires_in": 2592000
     * }
     */
    public static String getAuth() {
        // 官網獲取的 API Key 更新為你註冊的--百度雲應用的AK
        String clientId = AK;
        // 官網獲取的 Secret Key 更新為你註冊的--百度雲應用的SK
        String clientSecret = SK;
        return getAuth(clientId, clientSecret);
    } 
    /**
     * 獲取API訪問token
     * 該token有一定的有效期，需要自行管理，當失效時需重新獲取.
     * @param ak - 百度雲官網獲取的 API Key
     * @param sk - 百度雲官網獲取的 Securet Key
     * @return assess_token 示例：
     * "24.460da4889caad24cccdb1fea17221975.2592000.1491995545.282335-1234567"
     */
    public static String getAuth(String ak, String sk) {
        // 獲取token地址
        String authHost = "https://aip.baidubce.com/oauth/2.0/token?";
        String getAccessTokenUrl = authHost
                // 1. grant_type為固定引數
                + "grant_type=client_credentials"
                // 2. 官網獲取的 API Key
                + "&client_id=" + ak
                // 3. 官網獲取的 Secret Key
                + "&client_secret=" + sk;
        try {
            URL realUrl = new URL(getAccessTokenUrl);
            // 開啟和URL之間的連線
            HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();
            connection.setRequestMethod("GET");
            connection.connect();
            // 獲取所有響應頭欄位
            Map<String, List<String>> map = connection.getHeaderFields();
            // 遍歷所有的響應頭欄位
            /*for (String key : map.keySet()) {
                System.out.println(key + "--->" + map.get(key));
            }*/
            // 定義 BufferedReader輸入流來讀取URL的響應
            BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String result = "";
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
            /**
             * 返回結果示例
             */
            JSONObject jsonObject = new JSONObject(result);
            String access_token = jsonObject.getString("access_token");
            return access_token;
        } catch (Exception e) {
            System.err.printf("獲取token失敗！");
            e.printStackTrace(System.err);
        }
        return null;
    }
    public static void main(String[] args) {
        getAuth();
    }
}

以上測試通過。
在此次學習中有四個地方耗時最多（四個注意地方）
歡迎大家相互學習。如有bug請直接指出。謝謝。

人臉識別系統_人臉檢測

人臉識別系統_人臉檢測

人臉識別系統用於登機驗證是否安全？

Python人臉識別最佳教材典範，40行代碼搭建人臉識別系統！

人工智慧之人臉識別系統-郭冠召-專題視訊課程

python人臉識別系統早已開源，離線識別率高達99%以上！

[原始碼和報告分享] VC++實現的支援攝像頭和影象的人臉識別系統

駕考找人代考成不可能杭州駕考新增人臉識別系統

環宇暢行分享：人臉識別系統用於共享單車

Qt編寫百度離線版人臉識別+比對+活體檢測

人臉識別中的活體檢測演算法綜述

人臉識別中的活體檢測演算法

人臉識別系統在校園的應用場景日益豐富

人臉識別系統中的考勤技術的功能和特點

基於PCA和SVM的人臉識別系統

基於深度學習的人臉識別系統，識別率高達99.7%

【opencv】基於opencv2的人臉識別系統

基於PCA和SVM的人臉識別系統－error修改

Python人臉識別最佳教材典範，40行程式碼搭建人臉識別系統！

基於PCA的人臉識別系統（JAVA版）（一） OpenCV在JAVA上的環境配置

基於稀疏表示的實際應用人臉識別系統

人臉識別系統_人臉檢測

相關推薦