前阶段无聊想搞个人脸识别玩玩,发现一个有趣的插件包,虽然不算特别强大但是相对还是能实现效果,主要是它简单啊,让你5分钟内就会用,可以去玩玩看,现在我把它拿出来和大家分享
这个插件就是jquery.facedetection
首先
npm install jquery.facedetection
先引入jquery
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
下载依赖包,我们只需要把依赖包引进来,只需要三个js文件
<script src="node_modules/jquery.facedetection/src/ccv.js"></script>
<script src="node_modules/jquery.facedetection/src/jquery.facedetection.js"></script>
<script src="node_modules/jquery.facedetection/src/cascade.js"></script>
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html,body{
margin: 0;
padding:0;
}
.drawDiv{
position: absolute;
border: 3px solid yellow;
}
#image{
float: left;
}
.imgDiv{
float: left;
}
</style>
</head>
<body>
<img id="image" src=""/>
<div class="imgDiv">
<div class="draw"></div>
<br/>
<input type="button" value="开始识别" onclick="identifyFace()">
<input type="file"onchange="selectImage(this);" />
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="node_modules/jquery.facedetection/src/ccv.js"></script>
<script src="node_modules/jquery.facedetection/src/jquery.facedetection.js"></script>
<script src="node_modules/jquery.facedetection/src/cascade.js"></script>
<script>
//识别框样式
var str='';
//上传图片,使用文件流
function selectImage(file){
if(!file.files || !file.files[0]){
return;
}
var reader = new FileReader();
reader.onload = function(evt){
console.log(evt);
$('#image').attr('src', evt.target.result);
}
str = '';
document.getElementsByClassName('draw')[0].innerHTML = '';
reader.readAsDataURL(file.files[0]);
}
//开始识别
function identifyFace() {
str='';
$('#image').faceDetection(
function (faces) {
for (var i in faces) {
//识别结果循环传入方法drawFace
drawFace(faces[i].x, faces[i].y, faces[i].width, faces[i].height,faces[i].confidence);
}
}
);
}
//图片识别区的x,y轴以及宽高,confidence表示自信程度
function drawFace(x,y,width,height,confidence){
var confidenceStr='';
if(confidence<0){
confidenceStr='自信满满'
}else if(confidence>2){
confidenceStr='很不自信啊'
}else{
confidenceStr='一般般'
}
//将框框套上去
str+='<div class="drawDiv" style="left:'+x+'px;top:'+y+'px;width:'+width+'px;height:'+height+'px;">'+confidenceStr+'</div>'
document.getElementsByClassName('draw')[0].innerHTML=str
}
</script>
</body>
</html>
使用faceDetection将图片进行识别,识别结果通过回调函数形式传到face参数通过for in循环导出识别的结果,x,y分别为识别区的x,y方位,width和height就是宽高啦,confidence表示自信程度,自信程度这块可能不是很标准,不过大致还是能实现了
识别结果长这个样
项目预览
http://cgdmusic.cn:1234/face/index.html
插件的github