前阶段无聊想搞个人脸识别玩玩,发现一个有趣的插件包,虽然不算特别强大但是相对还是能实现效果,主要是它简单啊,让你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