[完善]预警弹出框显示优化

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

@@ -125,14 +125,11 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   //清空画布并且重新标绘
   clearCanvas(url) {
     this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
-    var img = new Image();
-    img.src = url;
-    img.onload = () => {
-      // this.canvasWidth = img.width;
-      // this.canvasHeight = img.height;
+    let imgBg: any = document.getElementById("img");
+    imgBg.src = url;
+    imgBg.onload = () => {
       window.setTimeout(() => {
-        // 加载图片
-        this.ctx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);
+        this.ctx.drawImage(imgBg, 0, 0, this.canvasWidth, this.canvasHeight);
         this.strokeRect(this.currentCoordinate);
       }, 0);
     };
@@ -143,19 +140,18 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   canvasLabel() {
     let imgBg: any = document.getElementById("img");
     imgBg.onload = () => {
+      // console.log("图片记载完毕!", imgBg);
       this.canvasWidth = imgBg.offsetWidth;
       this.canvasHeight = imgBg.offsetHeight;
-      const img = new Image();
-      img.src = imgBg.src;
-      img.onload = () => {
+      setTimeout(() => {
         const canvas: any = document.querySelector("#canvas");
         this.ctx = canvas.getContext("2d");
         const cWidth = canvas.width,
           cHeight = canvas.height;
         // 以图画底
-        this.ctx.drawImage(img, 0, 0, cWidth, cHeight);
+        this.ctx.drawImage(imgBg, 0, 0, cWidth, cHeight);
         this.strokeRect(this.currentCoordinate);
-      };
+      }, 0);
     };
   }
 
@@ -220,11 +216,8 @@ export class GetOutOfLineDetailsComponent implements OnInit {
 
     this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
     let imgBg: any = document.getElementById("img");
-    const img = new Image();
-    img.src = imgBg.src;
     const canvas: any = document.querySelector("#canvas");
-    this.ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-
+    this.ctx.drawImage(imgBg, 0, 0, canvas.width, canvas.height);
     this.strokeRect(this.currentCoordinate);
   }