使用前准备;
-
图片自己找个带人物的图片;
-
下面地址打开保存为 tfjs.js
https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2
3.下面地址打开保存为 body-pix.js
https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="tfjs.js"></script>
<script src="body-pix.js"></script>
</head>
<body>
<canvas id="cv" width="800" height="530" style="display: none;"></canvas>
<img id="img" src="57410e4667f97362aa44af920924938c.jpeg" width="800" height="530" style="display: none;" />
<div class="video-wrap" style="width:800px;height:530px;border: 1px solid;">
<div class="barrage-wrap" id="bw">
<div class="barrage barrage1">
测试弹幕111
</div>
<div class="barrage barrage2">
测试弹幕222
</div>
<div class="barrage barrage3">
测试弹幕333
</div>
</div>
</div>
<script>
let model = {
architecture: 'MobileNetV1',
outputStride: 8, //8,16 值越小，输出分辨率越大，模型越精确，速度越慢
multiplier: 1, // 0.5,0.75,1 值越大，层越大，模型越精确，速度越慢
quantBytes: 2 /* 1,2,4 此参数控制用于权重量化的字节
'4. 每个浮点数 4 个字节（无量化）。最高精度&原始模型尺寸',
'2. 每个浮点数 2 个字节。精度略低，模型尺寸减小 2 倍',
'1. 每个浮点数 1 个字节。精度降低, 模型尺寸减少 4 倍'
*/
}
bodyPix.load(model).then(function (net) {
const imageElement = document.getElementById('img');
net.segmentPerson(imageElement).then(segmentation => {
const foregroundColor = { r: 0, g: 0, b: 0, a: 0 } // 前景色 设为完全透明
const backgroundColor = { r: 0, g: 0, b: 0, a: 255 } // 背景色
let backgroundDarkeningMask = bodyPix.toMask(
segmentation,
foregroundColor,
backgroundColor
)
if (backgroundDarkeningMask) {
let context = cv.getContext('2d');
// 合成
context.putImageData(backgroundDarkeningMask, 0, 0);
let url = cv.toDataURL("image/png");
bw.style['-webkit-mask-image'] = `url(${url})`;
document.querySelectorAll(".barrage").forEach(item => {
item.classList.add("active")
// item.style.animation = `move 3s forwards`
})
}
})
});
</script>
</body>
</html>
<style>
.video-wrap {
background-image: url("57410e4667f97362aa44af920924938c.jpeg");
background-size: 100% 100%;
position: relative;
}
.video-wrap>.barrage-wrap {
-webkit-mask-image: url('/test2.png');
height: 100%;
}
/* 弹幕演示 */
.barrage {
white-space: nowrap;
position: absolute;
left: 0px;
top: 100px;
font-size: 24px;
color: #fff;
font-weight: bolder;
transition: 3s;
}
.barrage2 {
left: 30px;
top: 200px;
}
.barrage3 {
left: 70px;
top: 300px;
}
.barrage.active {
left: 800px;
}
</style>
网友评论