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

请问我做错了什么？我知道这个问题已经被问过很多次了，我尝试了各种方法，但是都没有解决我的问题。因此，我想问一下这个问题，可能其他人将来也会遇到类似的问题。

- Flutterian

---

嘿@Kaiido.. 当我调试它时，它没有出错.. 它将执行image.onload函数，但仍然无法在画布上看到图像.. 我能知道是因为什么吗？因为我也无法获得错误。 - Flutterian

this.selectedImage 是一个有效的 URL 吗？我怀疑这就是问题所在。 - Horace Lee

如果使用第二种方法，你会在“document”处遇到任何错误吗？据我所知，你无法直接访问DOM。你需要从“@angular/common”导入“DOCUMENT”，然后通过构造函数注入它。 - AdityaParab

@HoraceLee - 我尝试了其他的URL，但它仍然无法工作。 - Flutterian

@MThomas - 是的..我已经检查过了..即使路径给出本地路径，它也不起作用。 - Flutterian

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就什么也没有显示。

- Flutterian