[完善]预警框优化

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

@@ -215,14 +215,12 @@ 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);
     };
@@ -235,17 +233,15 @@ export class GetOutOfLineDetailsComponent implements OnInit {
     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");
-        this.ctx = canvas.getContext("2d");
-        const cWidth = canvas.width,
-          cHeight = canvas.height;
+      const canvas: any = document.querySelector("#canvas");
+      this.ctx = canvas.getContext("2d");
+      const cWidth = canvas.width,
+        cHeight = canvas.height;
+      setTimeout(() => {
         // 以图画底
-        this.ctx.drawImage(img, 0, 0, cWidth, cHeight);
+        this.ctx.drawImage(imgBg, 0, 0, cWidth, cHeight);
         this.strokeRect(this.currentCoordinate);
-      };
+      }, 0);
     };
   }
 
@@ -329,10 +325,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);
   }