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); }