基于上次的人脸检测后，一直纠结人脸注册，照片存放方式，我想到了两种方式，1.数据库存照片存放的路径，2.数据库存放照片的二进制码。但是针对我的毕业设计我想要是存路径的话，万一一不小心图片删除了，岂不是很麻烦，也就是我觉得要是系统迁移的话容易数据丢失（小白想法，其实正常情况下都是直接存的图片路径）。直接存照片的话数据库压力，开销等都比较大。所以最终小白还是选择了存图片路径的方式。
其实吧，我上面都想多了，百度云早就想好了，在你调用注册的时候他就帮你存图片在百度云上了。接口返回该照片的uid唯一标识。我们只需要记住该uid即可。
前端html
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="multipart/form-data; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>人脸检测</title>
<script src="bank_resource/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="bank_resource/main.js" type="text/javascript" charset="utf-8"></script><style>
.div-a{ float:left;width:100%;height:49%;border:1px solid #F00}
#img{
width: 100%;
height: 100%;
display: none;
}
span{ font-size:25px }
</style>
</head>
<body>
<div class="div-a" id="contentHolder">
<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="上传服务器" />
<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>
</body>js部分 main.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://localhost:8080/desing/faceRecognition/registerFace.do",
processData: false, // 必须
contentType: false, // 必须
data:fd,
datatype: "json",
success:function(data){
var mes = eval(data);
if (mes.success) {
var ok = confirm("注册成功是否继续注册？","继续注册","放弃继续注册");
if(ok){
fnResetPhotoGraph();
} else {
fnCloseVideo();
}
}
},
error: function(){
//请求出错处理
alert("加载异常!");
}
});
}后端action部分：
package com.xihua.facedistinguish.action;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;
import com.xihua.facedistinguish.entity.PhotoImage;
import com.xihua.facedistinguish.service.RegisterService;
/**
* 人脸识别服务 controller
* @author cc_小白成长
*
*/
@Controller
@RequestMapping(value = "faceRecognition")
public class FaceRecognitionAction {
@Resource
private RegisterService registerService;
/**
* 请求人脸注册
* @return
* @throws Exception
*/
@RequestMapping(value = "/registerFace.do")
@ResponseBody
public Map<String, Object> registerFace(@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();
//调用人脸检测的方法
PhotoImage phi = FaceDetect.add(in2b);
// 调用自己的service方法，该方法是存图片信息到自己的数据库，目前你可以不用使用。
//registerService.insert(phi);
modelMap.put("success", true);
} catch (Exception e) {
modelMap.put("success", false);
modelMap.put("data", e.getMessage());
}
return modelMap;
}
}FaceDetect.java
/**
* 人脸探测
* @author cc_小白成长
* @data 2017-11-15
*/
public class FaceDetect {
/**
*
* 人脸注册
* 针对数据库直接存照片二进制情况
* @param in2b 照片二进制信息
* @return 返回封装的人脸信息
*/
@SuppressWarnings("static-access")
public static PhotoImage add(byte [] in2b) {
// 请求url
String url = "https://aip.baidubce.com/rest/2.0/face/v2/faceset/user/add";
try {
String imgStr = Base64Util.encode(in2b);
String imgParam = URLEncoder.encode(imgStr, "UTF-8");
//uid ，user_info，group_id可以自行修改 // 注释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 按照自己数据库设计实现
public class PhotoImage {
private String hp_id;
private String hp_name;
private byte [] hp_photo;
private String imgurl;
....... get/set/toSting/构造方法等
}以上测试通过。
在登陆自己的百度云账号查看存储的照片信息
那么问题来了
1.这里不应该一个人重复注册，接下来学习人脸对比。
2.我还是不想把图片存在百度云中，最终的目的是使用人脸登陆所有信息存在自己数据库服务器中。
欢迎大家相互学习。如有bug请直接指出。谢谢。