function

src/components/function.vue

@@ -11,9 +11,17 @@
             id="video_cam"
             width="180"
             height="180"
+            class="face"
             autoplay
             v-show="isCamera"
           ></video>
+          <canvas
+            ref="canvasDOM"
+            width="180"
+            height="144"
+            class="kuang"
+            v-show="isCamera"
+          ></canvas>
         </div>
         <div id="tou" ref="dv1">
           <img :src="img[2]" alt />
@@ -59,12 +67,12 @@
         </div>
         <div>
           <!--canvas截取流-->
-          <canvas
+          <!-- <canvas
             ref="canvasDOM"
-            width="300"
-            height="240"
+            width="188"
+            height="144"
             v-show="isCamera"
-          ></canvas>
+          ></canvas> -->
         </div>
       </div>
     </div>
@@ -123,7 +131,7 @@ export default {
             canvasContext.clearRect(0, 0, canvas.width, canvas.height);
             event.data.forEach(function ({ x, y, width, height }) {
               canvasContext.strokeStyle = "#a64ceb";
-              canvasContext.strokeRect(x, y, width, height);
+              canvasContext.strokeRect(x, y, width-20, height-20);
               canvasContext.font = "11px Helvetica";
               canvasContext.fillStyle = "#fff";
             });
@@ -327,4 +335,15 @@ body {
 .cameraBtn button {
   margin: 0 0 10px 0;
 }
+
+.face {
+  position: absolute;
+  z-index: 1;
+}
+
+.kuang {
+  padding: 17px 0;
+  position: absolute;
+  z-index: 2;
+}
 </style>