JS-library/face-api/face_detection_extraction.html at master · fengfanv/JS-library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人脸检测demo</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            position: relative;
        }

        #canvas {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
        }
    </style>
</head>

<body>
    <div id="box">
        <img src="./face_database/face_test.png" id="face_test_img">
        <canvas id="canvas"></canvas>
    </div>

    <script src="./js/face-api.js"></script>
    <script>
        //加载模型
        // ssdMobilenetv1   Google开源AI算法除库包含分类和线性回归
        // tinyFaceDetector 比Google的mobilenet更轻量级，速度更快一点
        // tinyYolov2   识别身体轮廓的算法
        // mtcnn    多任务CNN算法
        // faceLandmark68Net    识别脸部特征用于mobilenet算法
        // faceLandmark68TinyNet    识别脸部特征用于tiny算法
        // faceRecognitionNet   识别人脸
        // faceExpressionNet    识别表情,开心，沮丧
        // ageGenderNet 识别性别和年龄
        Promise.all([
            faceapi.nets.ssdMobilenetv1.loadFromUri('./weights'),
            faceapi.nets.tinyFaceDetector.loadFromUri('./weights'),
            // faceapi.nets.tinyYolov2.loadFromUri('./weights'),
            // faceapi.nets.mtcnn.loadFromUri('./weights'),
            // faceapi.nets.faceLandmark68Net.loadFromUri('./weights'),
            // faceapi.nets.faceLandmark68TinyNet.loadFromUri('./weights'),
            // faceapi.nets.faceRecognitionNet.loadFromUri('./weights'),
            // faceapi.nets.faceExpressionNet.loadFromUri('./weights'),
            // faceapi.nets.ageGenderNet.loadFromUri('./weights'),
        ]).then(async () => {
            console.log('模型加载完毕！')

            let imgDom = document.getElementById('face_test_img'); //待检测的图片
            let canvasDom = document.getElementById('canvas'); //用于展示检测结果
            canvasDom.width = imgDom.width;
            canvasDom.height = imgDom.height;

            //------------------------------------------------------------
            //------------------------------------------------------------
            //------------------------------------------------------------
            //------------------------------------------------------------

            console.time('耗时')
            //(检测图片内所有人脸)（获取图片内 人脸位置）
            const results = await faceapi
                // .detectAllFaces(imgDom, new faceapi.TinyFaceDetectorOptions())
                .detectAllFaces(imgDom, new faceapi.SsdMobilenetv1Options())

            //在canvas上显示人脸检测框
            const displaySize = { width: imgDom.width, height: imgDom.height }
            const resizedDetections = faceapi.resizeResults(results, displaySize)

            const regionsToExtract = [];
            resizedDetections.forEach((fd, i) => {
                //显示人脸框
                const box = fd.box
                console.log(box)
                const drawBox = new faceapi.draw.DrawBox(box, { label: i + 1 })
                drawBox.draw(canvasDom)

                //确定提取区域
                regionsToExtract.push(new faceapi.Rect(box.x, box.y, box.width, box.height))
            })

            extractRes = await faceapi.extractFaces(imgDom, regionsToExtract)
            for (let i = 0; i < extractRes.length; i++) {
                let new_img_dom = document.createElement('img')
                new_img_dom.src = extractRes[i].toDataURL('image/jpeg', 1);
                document.body.appendChild(new_img_dom)
            }
            console.timeEnd('耗时')

        }).catch((err) => {
            console.error(err)
        })

        //https://www.cnblogs.com/neozhu/p/11771148.html
        //https://github.com/justadudewhohacks/face-api.js
    </script>
</body>

</html>