如何在Ionic+Angular中将图片添加到Canvas并绘制？元素获取失败求助

我在StackOverflow上找了不少相关答案，但放到Ionic和Angular环境里都不管用。现在遇到两个核心问题：

• 调用document.getElementById获取canvas、img元素时全返回null
• 绘制图片时出现类型错误

我的代码 #

HTML部分

<ion-card>
  <ion-card-content>
    <p>Original Image:</p>
    <img id="originalPhoto" src="https://preview.ibb.co/jnW4Qz/Grumpy_Cat_920x584.jpg" width=400 height=400 />
  </ion-card-content>
</ion-card>

<ion-card>
  <ion-card-content>
    <canvas id="canvas" width="240" height="297" style="border:1px solid #d3d3d3;"></canvas>
  </ion-card-content>
</ion-card>

TypeScript部分

drawOnPhoto() { 
  const canvas = document.getElementById("canvas") as HTMLCanvasElement;
  console.log("canvas", canvas); // returns null
  const ctx = canvas.getContext("2d");
  console.log("ctx",ctx); //returns null
  const img = document.getElementById("originalPhoto");
  console.log("img", img); // returns null
  ctx.drawImage(img, 10, 10);
  /*
  img, error
  Type 'HTMLElement' is missing the following properties from type 
  'HTMLCanvasElement': height, width, captureStream, getContext, 
  and 2 more.
  */
}

解决方案 #

1. 解决DOM元素返回null的问题

Angular里不推荐直接用document.getElementById，因为组件视图可能还没渲染完成，或者视图封装机制导致无法直接访问。改用Angular官方的ViewChild来获取元素：

• 第一步：在组件类中导入所需依赖

import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';

• 第二步：给HTML元素添加模板引用变量（替换原来的id）

<ion-card>
  <ion-card-content>
    <p>Original Image:</p>
    <img #originalPhoto src="https://preview.ibb.co/jnW4Qz/Grumpy_Cat_920x584.jpg" width=400 height=400 />
  </ion-card-content>
</ion-card>

<ion-card>
  <ion-card-content>
    <canvas #canvas width="240" height="297" style="border:1px solid #d3d3d3;"></canvas>
  </ion-card-content>
</ion-card>

• 第三步：在组件类中声明引用，并在AfterViewInit钩子中操作DOM（此时视图已完全渲染）

export class YourComponent implements AfterViewInit {
  // 指定泛型明确元素类型
  @ViewChild('originalPhoto') originalPhoto!: ElementRef<HTMLImageElement>;
  @ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;

  ngAfterViewInit(): void {
    // 视图渲染完成后再执行绘制逻辑
    this.drawOnPhoto();
  }

  drawOnPhoto() { 
    const canvasElement = this.canvas.nativeElement;
    const ctx = canvasElement.getContext("2d");
    const imgElement = this.originalPhoto.nativeElement;

    // 必须等图片加载完成再绘制，否则会绘制空内容
    imgElement.onload = () => {
      // 加空值判断避免报错
      ctx?.drawImage(imgElement, 10, 10);
    };
  }
}

2. 解决类型错误的问题

原来的错误是因为document.getElementById返回的是HTMLElement，而drawImage需要的是HTMLImageElement。通过ViewChild<ElementRef<HTMLImageElement>>可以直接拿到正确类型的元素，同时对ctx添加空值判断（ctx?.），避免因getContext返回null导致的报错。

内容的提问来源于stack exchange，提问作者Thomas Degroot