From 5f1ad0a69b0dc1725c1711ccfeef5799168e3cdb Mon Sep 17 00:00:00 2001
From: SHAOJIAHAO <55341701@qq.com>
Date: Wed, 26 Jul 2023 16:35:41 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E9=A2=84=E8=AD=A6=E6=A1=86?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../get-out-of-line-details.component.ts      | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
index 39ce9b5..f840b94 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
+++ b/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);
   }