[新增]根据坐标标绘矩形

src/app/pages/get-out-of-line-details/get-out-of-line-details.component.html

@@ -19,7 +19,8 @@
   <div class="content">
     <div *ngIf="selectedType == 'img'" class="imgbox">
       <ng-container *ngIf="imgUrl; else elseTemplate">
-        <img [src]="imgUrl" alt="" (error)="imgErr()">
+        <img id="img" [src]="imgUrl" alt="" (error)="imgErr()">
+        <!-- <canvas [width]="canvasWidth" [height]="canvasHeight" [ngStyle]="{'width': canvasWidth + 'px','height': canvasHeight + 'px'}" id="canvas"></canvas> -->
         <span *ngIf="isSrcError">
           图片资源未找到
         </span>

src/app/pages/get-out-of-line-details/get-out-of-line-details.component.scss

@@ -72,7 +72,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
+    position: relative;
+    #canvas{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+    }
     img {
       max-width: 100%;
       max-height: 100%;

src/app/pages/get-out-of-line-details/get-out-of-line-details.component.ts

@@ -22,12 +22,93 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   vedioUrl: string;
   content;
   details;
+
+  isAnxin = false;
+  coordinate = {
+    "0": {
+      id: 11,
+      box: [0, 0, 0.5, 0.5],
+      scores: 0.9081,
+    },
+    "1": {
+      id: 4,
+      box: [0.4399, 0.4705, 0.4883, 0.6071],
+      scores: 0.8815,
+    },
+    "2": {
+      id: 4,
+      box: [0.3868, 0.356, 0.4232, 0.4745],
+      scores: 0.8652,
+    },
+    "3": {
+      id: 4,
+      box: [0.33, 0.5203, 0.376, 0.6598],
+      scores: 0.865,
+    },
+    "4": {
+      id: 4,
+      box: [0.3562, 0.2895, 0.387, 0.3898],
+      scores: 0.8181,
+    },
+    "5": {
+      id: 4,
+      box: [0.2883, 0.3206, 0.3159, 0.4151],
+      scores: 0.6876,
+    },
+  };
+
   ngOnInit(): void {
-    console.log(this.data);
+    // console.log(this.data);
     this.details = this.data.content1;
     this.imgUrl = this.data.violateImage;
     this.vedioUrl = this.data.violateVideo;
     this.content = this.data.handleRecord;
+
+    setTimeout(() => {
+      if (this.isAnxin == true) {
+        this.canvasLabel();
+      }
+    }, 0);
+  }
+
+  canvasWidth = 0;
+  canvasHeight = 0;
+  canvasLabel() {
+    let imgBg: any = document.getElementById("img");
+    imgBg.onload = () => {
+      this.canvasWidth = imgBg.offsetWidth;
+      this.canvasHeight = imgBg.offsetHeight;
+      const img = new Image();
+      img.src = imgBg.src;
+      img.onload = () => {
+        const canvas: any = document.querySelector("#canvas");
+        let ctx = canvas.getContext("2d");
+        const cWidth = canvas.width,
+          cHeight = canvas.height;
+        // 以图画底
+        ctx.drawImage(img, 0, 0, cWidth, cHeight);
+        for (const key in this.coordinate) {
+          const item: any = this.coordinate[key];
+          let startPoint = [
+            Math.round(this.canvasWidth * item.box[0]),
+            Math.round(this.canvasHeight * item.box[1]),
+          ];
+          let endPoint = [
+            Math.round(this.canvasWidth * item.box[2]),
+            Math.round(this.canvasHeight * item.box[3]),
+          ];
+          console.log(startPoint, endPoint);
+          ctx.strokeStyle = "red";
+          ctx.lineWidth = 3;
+          ctx.strokeRect(
+            startPoint[0],
+            startPoint[1],
+            endPoint[0] - startPoint[0],
+            endPoint[1] - startPoint[1]
+          );
+        }
+      };
+    };
   }
 
   selectedType: string = "img";