JS-library/face-api/index.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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 face_database = await fetch('./face_database/index.json')
            face_database = await face_database.json()
            // console.log(face_database)
            const labeledDescriptors = []
            for (let i = 0; i < face_database.length; i++) {
                let peopleItem = face_database[i];
                for (let j = 0; j < peopleItem.image.length; j++) {
                    peopleItem.image[j] = await faceapi.fetchImage(location.origin + peopleItem.image[j]) //加载图片
                    const result = await faceapi.detectSingleFace(peopleItem.image[j]).withFaceLandmarks().withFaceDescriptor() //计算人脸特征描述符(检测单个人脸)
                    // console.log(result)
                    // const results = await faceapi.detectAllFaces(peopleItem.image[j]).withFaceLandmarks().withFaceDescriptors() //计算人脸特征描述符(检测所有(多个)人脸)
                    // console.log(results)
                    peopleItem.image[j] = result.descriptor
                }
                //人脸特征标签数据。人脸特征数据，和，(人名/标签)，进行关联
                labeledDescriptors.push(new faceapi.LabeledFaceDescriptors(
                    peopleItem.label,
                    peopleItem.image
                ))
            }
            // console.log(labeledDescriptors)
            console.log('人脸数据库初始化完毕！')

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

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

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

            //根据，人脸标签数据，创建一个，面部匹配器
            const faceMatcher = new faceapi.FaceMatcher(labeledDescriptors);

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

            console.time('耗时')
            //计算人脸特征描述符(检测图片内所有人脸)（获取图片内 人脸特征数据，人脸位置）
            const results = await faceapi
                .detectAllFaces(imgDom)
                .withFaceLandmarks()
                .withFaceDescriptors()

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

            //开始人脸匹配
            results.forEach((fd, i) => {
                const bestMatch = faceMatcher.findBestMatch(fd.descriptor) //人脸匹配
                console.log(bestMatch) //打印人脸匹配结果

                //显示人脸框
                const box = resizedDetections[i].detection.box
                const drawBox = new faceapi.draw.DrawBox(box, { label: bestMatch.toString() })
                drawBox.draw(canvasDom)

            })
            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>