-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathface-api.html
151 lines (148 loc) · 6.03 KB
/
face-api.html
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<html>
<head>
<title>face-api.js</title>
<meta charset="utf-8">
<script src="script/face-api/face-api.min.js"> </script>
</head>
<body>
<h1>face-api.js</h1>
<div id="demo" style="position: relative;min-height: 50px">
<!--视频-->
<div id="wrap" style="width:640px;height:480px;position:relative;display: none">
<video id="video" width="640" height="480" autoplay></video>
<img src="https://ossweb-img.qq.com/images/game/brand/game-logo.png" id="logo" alt="" style="display:none">
</div>
<!--图片-->
<div id="upload" style="display:none;position: absolute;z-index:99">
<input id="img_input" type="file" accept="image/*" onchange="uploadPic(event)" />
<label for="img_input"></label>
</div>
<!--图片预览-->
<div id="preview"></div>
<!--canvas-->
<canvas id="draw" style="position: absolute;left:0;top:0;z-index:9;width:0px;height:0px;z-index:9;"></canvas>
</div>
<!--状态-->
<p id="status"></p>
<p>官方地址：<a href="https://github.com/justadudewhohacks/face-api.js">https://github.com/justadudewhohacks/face-api.js</a></p>
<p>前端智能DEMO合集：<a href="http://allan5.com/FE-AI/">http://allan5.com/FE-AI/</a></p>
<script>
let net = null;
let c = document.getElementById('draw');
let ctx = c.getContext('2d');
let canvasVideoSize = {'width':640,'height':480}
const status = document.getElementById('status')
let video = document.getElementById('video');
window.addEventListener("DOMContentLoaded", function() {
video = document.getElementById('video');
let mediaConfig = {
'audio': false,
'video': {
facingMode: 'user',
width: 640,
height: 480,
}
};
//加载模型
loadModel()
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
document.getElementById('wrap').style.display = 'block'
setInterval(function(){
//预测
predict(video)
},500)
video.srcObject = stream;
video.play();
}).catch((e)=>{
//不支持摄像头显示图片逻辑
document.getElementById('upload').style.display = 'block'
});
}
}, false);
async function loadModel() {
status.innerText = '正在加载模型..'
//加载基础面部识别
net = await faceapi.nets.ssdMobilenetv1.loadFromUri('model/face-api/')
//加载表情识别模型
net = await faceapi.nets.faceExpressionNet.loadFromUri('model/face-api/')
//加载面部68点
net = await faceapi.nets.ageGenderNet.loadFromUri('model/face-api/')
status.innerText = '模型加载完成'
}
//图片
async function uploadPic(e){
let file = e.target.files[0];
if (!file.type.match('image.*')) return;
let reader = new FileReader();
let PREVIEW = document.getElementById('preview');
status.innerText = '正在预测..';
c.style.width = 0;
c.style.height = 0;
reader.readAsDataURL(file);
reader.onload = function(e){
PREVIEW.innerHTML = '';
PREVIEW.innerHTML = `<img id="pic" src='${e.target.result}' width="" >`;
let image = new Image();
image.src= e.target.result;
image.onload = function () {
//预测
predict(image)
}
}
}
//预测
async function predict(o) {
const detections = await faceapi.detectAllFaces(o).withFaceExpressions().withAgeAndGender();
status.innerText = '预测完成'
console.log(detections)
if(detections.length > 0){
const cSize = detections[0].detection
c.style.width =cSize.imageWidth;
c.style.height = cSize.imageHeight;
c.width = cSize.imageWidth;
c.height = cSize.imageHeight;
detections.forEach((e) => {
const p = e.detection.box;
//画面部识别框和评分
draw({point:[p.x,p.y,p.width,p.height],text:e.detection.classScore,box:true})
//性别、年龄、情绪
draw({point:[p.x,p.y+p.height+20],text:e.gender+','+e.age.toFixed(1)+','+sortObject(e.expressions)[0].key})
});
}else{
console.log('没有发现人脸')
}
}
//画框
function draw(e) {
let BOX = e.point;
ctx.beginPath();
//保留3位小数
if(typeof e.text === 'number') e.text = e.text.toFixed(4)
//设置绘制属性
ctx.strokeStyle="aqua";
ctx.fillStyle = "aqua";
ctx.font = "bold 12px arial";
//绘制边框
if(e.box){
ctx.strokeRect(BOX[0],BOX[1],BOX[2],BOX[3]);
}
ctx.fillText(e.text,BOX[0],BOX[1]);
}
//排序
function sortObject(obj) {
let arr = [];
for(let prop in obj){
if(obj.hasOwnProperty(prop)){
arr.push({
'key':prop,
'value':obj[prop]
})
}
}
arr.sort(function (a,b) {return b.value - a.value})
return arr;
}
</script>
</body>
</html>