使用js插件实现简单有趣的人脸识别

原创已于 2022-02-20 19:06:16 修改 · 1.6w 阅读

26 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js人脸识别 #人脸识别 #js

于 2018-04-04 09:35:04 首次发布

介绍了一个简易的人脸识别插件jquery.facedetection，通过简单的代码实现图片中的人脸检测，并展示了如何使用该插件完成从图片选择到识别结果展示的全过程。

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