jquery.facedetection.js 这款插件可以从图片、摄像头、视频文件中检测人脸，并进行识别-BFW插件库

jquery.facedetection.js 这款插件可以从图片、摄像头、视频文件中检测人脸，并进行识别

jquery.facedetection.js 这款插件可以从图片、摄像头、视频文件中检测人脸，并进行识别，非常强悍

第一步引入bfwone

第二步执行插件识别人脸

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.facedetection"], function() {
                $('#try-it').click(function (e) {
                    e.preventDefault();

                    $('.face').remove();

                    $('#picture').faceDetection({
                        complete: function (faces) {
                            for (var i = 0; i < faces.length; i++) {
                                $('<div>', {
                                    'class': 'face',
                                    'css': {
                                        'position': 'absolute',
                                        'left': faces[i].x * faces[i].scaleX + 'px',
                                        'top': faces[i].y * faces[i].scaleY + 'px',
                                        'width': faces[i].width  * faces[i].scaleX + 'px',
                                        'height': faces[i].height * faces[i].scaleY + 'px'
                                    }
                                })
                                .insertAfter(this);
                            }
                        },
                        error: function (code, message) {
                            alert('Error: ' + message);
                        }
                    });
                });
            });
        });
    </script>
    <style>
        .picture-container {
            position: relative;
            width: 600px;
            height: auto;
            margin: 20px auto;
            border: 10px solid #fff;
            box-shadow: 0 5px 5px #000;
        }
        .picture {
            display: block;
            width: 100%;
            height: auto;
        }

        .face {
            position: absolute;
            border: 2px solid #FFF;
        }
    </style>
</head>
<body>


    <div class="picture-container">
        <img id="picture" class="picture" src="http://editor.bfw.wiki/bfwrepo/image/facedetection/picture.jpg">
    </div>

    <p style="text-align:center">
        <button id="try-it" > 点击看看能识别几个人的脸部</button>
   
    </p>
    <p style="text-align:center">
        <a class="button-visit" target="_blank" href="http://facedetection.jaysalvat.com">查看官方网站</a>
    </p>
</body>
</html>

官网