-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathbodypix.html
137 lines (134 loc) · 7.52 KB
/
bodypix.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
<html>
<head>
<title>bodypix</title>
<meta charset="utf-8">
<script src="script/tfjs.1.3.1.js"></script>
<script src="script/body-pix.1.0.0.js"></script>
</head>
<body>
<h1>人物分隔</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>
</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>
<!--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/tensorflow/tfjs-models/tree/master/body-pix">https://github.com/tensorflow/tfjs-models/tree/master/body-pix</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() {
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';
//初始化canvas width height
c.width = canvasVideoSize.width;
c.height = canvasVideoSize.height;
c.style.height = canvasVideoSize.height;
c.style.width = canvasVideoSize.width;
video.srcObject = stream;
video.play();
video.onloadeddata = function(){
//用requestAnimationFrame执行预测函数
step(video)
}
}).catch(e=>{
//不支持摄像头显示图片逻辑
document.getElementById('upload').style.display = 'block'
});
}
}, false);
//图片
function uploadPic(e){
let file = e.target.files[0];
if (!file.type.match('image.*')) return;
let reader = new FileReader();
reader.readAsDataURL(file);
status.innerText = '正在预测..'
reader.onload = function(e){
let image = new Image();
image.src= e.target.result;
image.onload = function () {
//初始化canvas width height
c.width = canvasVideoSize.width;
c.height = canvasVideoSize.height;
c.style.height = canvasVideoSize.height;
c.style.width = canvasVideoSize.width;
//在image加载后重设canvas大小对象
canvasVideoSize = {'width':image.width,'height':image.height}
//预测
predict(image)
}
}
}
//加载模型
async function loadModel(){
status.innerText = '正在加载模型...'
net = await bodyPix.load();
status.innerText = '模型加载完成'
}
async function predict(o){
if(!net) return;
status.innerText = '';
//背景涂色***************/
const maskBackground = true;
const personSegmentation = await net.estimatePersonSegmentation(o);
const backgroundDarkeningMask = bodyPix.toMaskImageData(personSegmentation, maskBackground);
const opacity = 0.6;
const maskBlurAmount = 1;
const flipHorizontal = false;
bodyPix.drawMask(c, o, backgroundDarkeningMask, opacity, maskBlurAmount, flipHorizontal);
//背景虚化***************/
// const personSegmentation = await net.estimatePersonSegmentation(o);
// const backgroundBlurAmount = 3;
// const edgeBlurAmount = 3;
// const flipHorizontal = false;
// bodyPix.drawBokehEffect(c, o, personSegmentation, backgroundBlurAmount, edgeBlurAmount, flipHorizontal);
//人物涂色***************/
// const partSegmentation = await net.estimatePartSegmentation(o);
// const rainbow = [
// [110, 64, 170], [143, 61, 178], [178, 60, 178], [210, 62, 167],
// [238, 67, 149], [255, 78, 125], [255, 94, 99], [255, 115, 75],
// [255, 140, 56], [239, 167, 47], [217, 194, 49], [194, 219, 64],
// [175, 240, 91], [135, 245, 87], [96, 247, 96], [64, 243, 115],
// [40, 234, 141], [28, 219, 169], [26, 199, 194], [33, 176, 213],
// [47, 150, 224], [65, 125, 224], [84, 101, 214], [99, 81, 195]
// ];
// const coloredPartImage = bodyPix.toColoredPartImageData(partSegmentation, rainbow);
// const opacity = 0.7;
// const flipHorizontal = false;
// const maskBlurAmount = 0;
// const pixelCellWidth = 1.0;
// bodyPix.drawPixelatedMask(c, o, coloredPartImage, opacity, maskBlurAmount,flipHorizontal, pixelCellWidth);
}
function step() {
predict(video)
window.requestAnimationFrame(step);
}
</script>
</body>
</html>