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它就没有显示任何东西。