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，它什么也没显示。

Angular6-canvas.drawImage（）不起作用

1 个答案: