SpringBoot實現人臉識別功能
阿新 • • 發佈：2022-05-27
一、人臉註冊
step1：人像採集。在註冊頁面上用html中video元件和js呼叫筆記本攝像頭，並抓取人像圖片。沒有攝像頭的筆記本、桌上型電腦的童鞋告辭吧，走好不送。。。
step2：人像上傳至專案資料夾。將在頁面採集到的人像資料轉換成bash64字元傳輸到web後臺，在後臺將bash64轉換成圖片上傳至專案資料夾。
step3：將使用者的註冊資訊寫入資料庫，使用者的照片使用路徑儲存。
step4：將採集到的人像資訊（bash64）上傳至百度雲的人臉識別雲端伺服器。ps這塊實現也可離線私有化處理方案，有興趣的童鞋可自行研究。
二、人臉登入
step1：人像採集。在登入頁面上用html中video元件和js呼叫筆記本攝像頭，並抓取人像圖片。
step2：人像資料傳輸。抓取的人臉圖片資訊回傳至web後臺。
step3：人像比對。在web後臺例項化並呼叫百度雲人臉識別的sdk，將登入頁面採集到的影象資料和註冊的影象資訊相比對（這塊是百度雲人臉識別解決方案實現的，也是最牛B的地方），返回的比分大於95分即可實現登入。
具體實現
好了，前言和需求分析也嗶嗶了這麼久了，接下來是實現和上程式碼了。
一、人臉註冊
前端頁面程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/**解決瀏覽器相容性問題**/
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}/**/
body{background: url(img/bg03.jpg) no-repeat center;}
h1{color: #fff;text-align: center;line-height: 80px;}
.media{width: 534px;height: 400px;margin: 40px auto 0;
}
#register{width: 200px;height:50px;background-color: #2196f3; margin: 60px auto 0;
text-align: center;line-height: 50px;color: #fff;border-radius: 10px;}
#canvas{display: none;}
#shuru{width: 200px;height:50px;background-color: #2196f3; margin: 20px auto 0;}
</style>
</head>
<body>
<h1>百度雲人臉註冊</h1>
<div id="shuru">
使用者名稱：
<input type="text" name="username" id="username"/>
</div>
<div class="media">
<video id="video" width="450" height="300" src="" autoplay></video>
<canvas id="canvas" width="450" height="300"></canvas>
</div>
<button id="register" >確定註冊</button>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/**呼叫攝像頭，獲取媒體視訊流**/
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("register");
btn.onclick = function () {
var username = $("#username").val();
alert($("#username").val());
if(username != null){
//點選按鈕時拿到登陸者面部資訊
userContext.drawImage(video,0,0,450,300);
var userImgSrc = document.getElementById("canvas").toDataURL("img/png");
//拿到bash64格式的照片資訊
var faceBase = userImgSrc.split(",")[1];
//ajax非同步請求
$.ajax({
url: "register",
type: "post",
data: {"faceBase": faceBase,
"userName": username
},
success: function(result){
if(result === '1'){
alert("註冊成功！！，點選確認跳轉至登入頁面");
window.location.href="toLogin";
}else if(result === '2'){
alert("您已經註冊過啦！！");
}else{
alert("系統錯誤！！");
}
}
})
}else{
alert("使用者名稱不能為空");
}
}
</script>
</body>
</html>
後臺具體程式碼如下:
private static final String APP_ID = "****";
private static final String API_KEY = "*******";
private static final String SECRET_KEY = "*******";
@Autowired
private IUserService userService;
@RequestMapping(value = "register",method = RequestMethod.POST)
public String register(String userName,String faceBase) throws IOException {
if(!StringUtils.isEmpty(userName) && !StringUtils.isEmpty(faceBase)) {
//檔案上傳的地址
String upPath = ResourceUtils.getURL("classpath:").getPath()+"static\\photo";
//用於檢視路徑是否正確
System.out.println(upPath);
// 圖片名稱
String fileName = userName+System.currentTimeMillis() + ".png";
System.out.println(upPath+"\\"+fileName);
File file = new File(upPath+"\\"+fileName);
//初始化百度雲的AipFace
AipFace client = new AipFace(APP_ID, API_KEY, SECRET_KEY);
//往自己demo資料庫裡插入一條使用者資料
Users user = new Users();
user.setUserName(userName);
user.setUserPhoto(upPath+"\\"+fileName);
Users exitUser = userService.selectUserByName(user);
if(exitUser != null) {
return "2";
}
userService.addUsers(user);
// 往自己demo伺服器裡面上傳攝像頭捕獲的圖片
GenerateImage(faceBase, file);
//向百度雲人臉庫插入一張人臉
facesetAddUser(client,faceBase,userName);
}
return "1";
}
APP_ID 、API_KEY、SECRET_KEY三個引數分別為百度雲人臉識別上面的三個資料項，如下圖
點選完註冊按鈕後，就會發現。。。
1
到這就算一個使用者註冊成功了，個人這張大帥臉也算是錄進去了，下面就是刷臉登入了。面試題推薦：a版）
二、刷臉登入
當我註冊完後就會進入登入頁面
這時我點選登入按鈕，js觸發後臺方法，具體入下：
@RequestMapping(value = "login",method = RequestMethod.POST)
public String login(String faceBase) {
String faceData = faceBase;
//進行人像資料對比
AipFace client = new AipFace(APP_ID,API_KEY,SECRET_KEY);
Double num = verifyUser(faceData,client);
if(num>95) {
return "1";
}else {
return "2";
}
}
/**
* 人臉比對
* @param imgBash64 照片轉bash64格式
* @param imgType 型別
* @param groupList 百度雲人臉識別使用者組
* @return
*/
public Double verifyUser(String imgBash64,AipFace client) {
// 傳入可選引數呼叫介面
HashMap<String, String> options = new HashMap<String, String>();
JSONObject res = client.search(imgBash64, "BASE64", "user_01", options);
System.out.println(res.toString(2));
System.out.println(res.getJSONObject("result"));
System.out.println(res.getJSONObject("result").getJSONArray("user_list"));
JSONObject user = (JSONObject) res.getJSONObject("result").getJSONArray("user_list").get(0);
Double score = (Double) user.get("score");
return score;
}
以上就是整個實現的思路和一些步驟了，demo涉及的類和頁面比較多，不方便一一截圖，隨後我把資源上傳到本站。如有需要可自行下載。