使用js實現簡單有趣的人臉識別
阿新 • • 發佈:2018-12-06
前階段無聊想搞個人臉識別玩玩,發現一個有趣的外掛包,雖然不算特別強大但是相對還是能實現效果,主要是它簡單啊,讓你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