Angular6 - canvas.drawImage（）不起作用

Question

我想把圖像放在畫布上。 最初我用圖像作為背景。 但每當我將畫布轉換為圖像時，背景圖像都不會被復制。 因此我試圖在畫布上繪制圖像。 我從設備圖庫中選擇圖像。 將圖像URL存儲為字符串並傳遞給下一個組件。 我檢查過，能夠得到價值。 請看下面的代碼，讓我知道我做錯了什么。

1. HTML

<canvas no-bounce id="canvas"
    (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' (touchend)='handleEnd($event)' (click)="removeSelectedTxt()"
    [ngStyle]="{
    'width': '98%',
    'height': '65%'}" #canvas ></canvas>

2. ts文件

@ViewChild('canvas') public canvas: ElementRef;

ionViewDidLoad() {
   console.log('ionViewDidLoad ImageHomePage');
    this.canvasElement = this.canvas.nativeElement;
    this.ctx = this.canvasElement.getContext('2d');
    let image = this.renderer.createElement('img');
    image.src = this.selectedImage;
    this.ctx.drawImage(image,10, 10, this.canvasElement.width, 
    this.canvasElement.height);
}

我用另一種方式也......

方法2-

ionViewDidLoad() {
    // this.selectedImage = this.route.snapshot.params['id'];
    console.log('ionViewDidLoad ImageHomePage');
    let canvasID= document.getElementById("canvas") as HTMLCanvasElement; 
    let canvasContext = canvasID.getContext("2d");
    this.canvasElement = this.canvas.nativeElement;
    this.ctx = this.canvasElement.getContext('2d');
    let image = new Image() as HTMLImageElement;
    image.onload = function() {
      canvasContext.drawImage(image, 0, 0, canvasID.width, canvasID.height);
    }
    image.src = this.selectedImage;
}

我可以知道，我做錯了什么？ 我知道這個問題已被問了很多次，我嘗試了這些方法，但沒有一個對我有效。因此提出問題，可能是其他人將來會面臨問題。

Answer 1

最后我解決了問題..

我添加了Renderer 2 ..

以下是我的代碼..

我在ionViewDidload()調用了下面的函數

let newImg = this.renderer.createElement('img');
newImg.src = this.selectedImage;
newImg.onload  = this.drawImg(newImg);

drawImg(imgContext){
    console.log('drawImg called');
    setTimeout(() => {
      this.ctx.drawImage(imgContext,0,0, this.canvasElement.width, this.canvasElement.height);
    }, 1000);

  }

我調用了setTimeout因為它需要時間。 沒有setTimeout它沒有顯示任何東西。