提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
本代码部分参考B站up 球球的前端奶茶屋 uid：25424697
提示：以下是本篇文章正文内容，下面案例可供参考
一、bodypix
BodyPix 可用于将图像分割为人物像素和非人物像素。人物像素又可进一步分类为 24 个身材部位中的任一部位。紧张的是，此模子仅实用于单个人物，因此请确保您的输入数据不包罗多个人。
二、使用步骤
1.引入并加载bodypix模子
引用代码如下：
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix"></script>
var bodypix = await bodyPix.load();
注意：加载bodypix需要用异步调用
2.代码
代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <video id="video" width="800" height="600" muted autoplay playsinline></video>
- <canvas id="canvas" width="800" height="600"></canvas>
- </body>
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix"></script>
- <!-- <script>
- bodypix.load().then(function (net) {
- // BodyPix model loaded
- });
- </script> -->
- <script>
- var video = document.getElementById('video');
- var canvas = document.getElementById("canvas");
- var ctx = canvas.getContext('2d');
- var cantmp=document.createElement("canvas");
- var ctxtmp=cantmp.getContext("2d",{ willReadFrequently: true });
- async function a() {
- var stream = await navigator.mediaDevices.getUserMedia({ video: true });
- video.srcObject = stream;
- }
- a();
- async function b() {
- var bodypix = await bodyPix.load();
- cantmp.width = video.width;
- cantmp.height = video.height;
-
- async function an() {
- ctxtmp.drawImage(video, 0, 0, video.width, video.height);
- var frame = ctxtmp.getImageData(0, 0, video.width, video.height);
- var seg = await bodypix.segmentPerson(canvas,{segmentationThreshold:0.6});
- console.log(seg);
- // var ing = bodyPix.toMask(seg);
- // console.log(ing.data.length);
-
- for (let i = 0; i < seg.data.length; i++) {
- if (seg.data[i]===0) {
- // console.log(1);
- frame.data[(i*4 )+3] = 1;
- }
- }
- ctx.putImageData(frame,0,0);
- requestAnimationFrame(an);
- }
- an();
- }
- b();
- </script>
- </html>
后言
易错点：调用segmentPerson模子时，也需要异步调用
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
