使用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" 直接上程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title <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