Angular6 - canvas.drawImage（）不工作答案

【问题标题】：Angular6 - canvas.drawImage() not workingAngular6 - canvas.drawImage（）不工作
【发布时间】：2026-01-31 07:30:01
【问题描述】：

我想把图像放在画布上。最初我使用图像作为背景。但是每当我将画布转换为图像时，背景图像都不会被复制。因此，我尝试在画布上绘制图像。我正在从设备图片库中选择图片。将图像 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;
}

我可以知道，我做错了什么吗？我知道这个问题已经被问过很多次了，我尝试了这些方法，但没有一个对我有用。因此问这个问题，可能是其他人将来会遇到问题..

【问题讨论】：

不知道 ionic，所以那里可能有一些东西，但你的第一次尝试确实会失败，因为你没有等待图像在绘制之前加载。您可以将其从您的问题中删除。另一方面，从纯画布 API 的角度来看，第二次尝试应该可以工作。我怀疑您的图像无法在提供的 URI 上加载媒体。您可以添加image.onerror = console.error 来确保这一点。
谢谢Kaiido..让我试一次..
嘿@Kaiido..当我调试它时，它没有给出错误..它将执行 image.onload 函数但仍然无法在画布上看到图像..我知道是因为什么?因为我也无法出错。
this.selectedImage 是有效的 URL 吗？我怀疑这是导致问题的原因
在第二种方法的情况下，document 是否有任何错误？据我了解，您不能直接访问 DOM。你需要从@angular/common导入DOCUMENT，然后通过构造函数注入。

标签： javascript css html5-canvas ionic3 angular6

【解决方案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，它什么也没有显示。

【讨论】：