人臉識別系統_人臉檢測
阿新 • • 發佈: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請直接指出。謝謝。