angular - 类型 'HTMLElement' 的参数不可分配给类型 'CanvasImageSource' 的参数

Question

我试图将相同的图像加载到我的 HTML 中的所有 Canvas 中。我以前用 javascript 编写了整个网页，但现在我正在学习 angular 和 typescript。

我在 Visual Studio Code 中突出显示了此错误:

Argument of type 'HTMLElement' is not assignable to parameter of type 'CanvasImageSource'. Type 'HTMLElement' is missing the following properties from type 'HTMLVideoElement': height, msHorizontalMirror, msIsLayoutOptimalForPlayback, msIsStereo3D, and 80 more.ts(2345)

但我没有在控制台中显示任何错误。我可以让图像加载到 Canvas 内的 HTML 上(因此它可以正常工作)。

这是我的:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {

  constructor() { }

  ngOnInit() {

    document.querySelectorAll("canvas").forEach(c=>{
      var ctx = c.getContext("2d");
      var img = document.getElementById("P43");
      ctx.drawImage(img,0,0,106,50); //(image, offsetx, offsety, x, y)
    });
  }

}

VS Code 高亮显示这一行的错误 ctx.drawImage(img,0,0,106,50);//(image, offsetx, offsety, x, y)，它突出显示 img 并显示错误。

我试图搜索这个，但我找到的唯一解决方案是当你有标签的 ID 时(我没有，因为它在页面上都是 Canvas 。)或者是否有输入。

感谢任何帮助。

Answer 1

您必须告诉编译器 img 变量被设置为 HTMLImageElement。

ctx.drawImage 方法需要一个 :

HTMLOrSVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap;

如果您的 P43 是 Canvas ，您必须执行以下操作:

const img = document.getElementById("P43") as HTMLCanvasElement;

如果是图片元素:

const img = document.getElementById("P43") as HTMLImageElement;

---

实际检查元素实际上是 Element 的正确类型会更好。您可以使用 instanceof 执行此操作。 TypeScript 编译器还将选择 if 语句，并且在 if 语句内部，img 变量将是编译器的 HTMLCanvasElement，因此不再需要显式转换:

const img = document.getElementById("P43");

if (img instanceof HTMLImageElement) {
  ctx.drawImage(img,0,0,106,50);
} else {
  // wrong element!
}