Javascript Angular6-canvas.drawImage（）不工作

我想把图像放在画布上。最初我用图像作为背景。但每当我将画布转换为图像时，背景图像就不会被复制。所以我试着在画布上画画。我正在从设备图像库中选择图像。将图像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-

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

---

我能知道我做错了什么吗？我知道这个问题已经被问过很多次了，我尝试过这些方法，但没有一种对我有效。。所以问这个问题，可能是别人将来会面临的问题。

最后我解决了这个问题

我添加了

渲染器2

下面是我的代码

我在

ionViewDidload（）中调用了下面的函数

我调用了
setTimeout
，因为它需要时间。如果没有
setTimeout
它不会显示任何内容。
不知道，因此可能会有一些内容，但您的第一次尝试确实会失败，因为您没有等待图像在绘制之前加载。你可以把它从你的问题中删除。另一方面，从纯画布API的角度来看，第二次尝试应该是可行的。我怀疑的是，您的映像未能按照提供的URI加载媒体。您可以添加一个
image.onerror=console.error
来确保这一点。谢谢Kaido。。让我试一下..嘿@kaido。。当我调试它时，它没有给出错误。。它将执行image.onload函数，但仍然无法在画布上看到图像。。我可以知道是什么原因吗？因为我也无法获取错误。
this.selectedImage
是有效的URL吗？我怀疑这就是导致问题的原因。在第二种方法的情况下，
文档
是否有任何错误？据我所知，您不能直接访问DOM。您需要从
@angular/common
导入
文档
，然后通过构造函数注入它。
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;
}

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

  }