PaddlePaddle
diff --git a/‎packages/paddlejs-examples/humanStream/bgImgs/bainen.png‎
297 KB b/‎packages/paddlejs-examples/humanStream/bgImgs/bainen.png‎
297 KB
diff --git a/‎packages/paddlejs-examples/humanStream/index.html‎
Lines changed: 1 addition & 0 deletions b/‎packages/paddlejs-examples/humanStream/index.html‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎packages/paddlejs-examples/humanStream/index.ts‎
Lines changed: 9 additions & 15 deletions b/‎packages/paddlejs-examples/humanStream/index.ts‎
Lines changed: 9 additions & 15 deletions
@@ -47,6 +47,7 @@
     </head>
     <body>
         <video id="video"></video>
+        <img id="bainen" src="./bgImgs/bainen.png" style="display:none;"/>
         <div id="tool">
             <div id="video-tool" class="flex">
                 <button id="start" type="btn">开始</button>
 
@@ -6,23 +6,10 @@ const loadingDom = document.getElementById('isLoading');
 const video = document.getElementById('video') as HTMLVideoElement;
 const videoToolDom = document.getElementById('video-tool');
 
-
-const videoCanvas = document.querySelector('#demo') as HTMLCanvasElement;
 const bgElement = document.createElement('div') as HTMLDivElement;
 const container = document.querySelector('body');
 container.appendChild(bgElement);
 
-function makeBgDom() {
-    bgElement.style.width = `${videoCanvas.width}px`;
-    bgElement.style.height = `${videoCanvas.height}px`;
-
-    const imgURL = 'http://localhost:8866/bgImgs/bg.jpg';
-    bgElement.style.backgroundImage = 'url("' + imgURL + '")';
-    bgElement.style.backgroundRepeat = 'no-repeat';
-    bgElement.style.backgroundSize = 'cover';
-    bgElement.style.backgroundPosition = 'center';
-    bgElement.style.marginTop = `${-videoCanvas.height}px`;
-}
 load();
 
 // 视频开始播放，loading消失
@@ -41,16 +28,23 @@ videoToolDom.addEventListener('click', function (e: Event) {
     }
 });
 
+const canvas1 = document.getElementById('demo') as HTMLCanvasElement;
+
+const ctx = canvas1.getContext('2d');
+const img = new Image();
+img.src = './bgImgs/bg.jpg';
+img.onload = function () {
+    ctx.drawImage(img, 0, 0, canvas1.width, canvas1.height);
+};
+
 async function load() {
     await humanseg.load();
     camera = new Camera(video, {
         onFrame: async () => {
             const {
                 data
             } = await humanseg.getGrayValue(video);
-            const canvas1 = document.getElementById('demo') as HTMLCanvasElement;
             humanseg.drawHumanSeg(canvas1, data);
-            makeBgDom();
         }
     });
 }