“ HTMLElement”类型的参数不能分配给“ CanvasImageSource”类型的参数

Question

我试图将相同的图像加载到HTML的所有画布中。我以前用javascript编写了整个网页，但现在我正在学习角度和打字稿。

我在Visual Studio代码中突出显示了此错误：

“ HTMLElement”类型的参数不能分配给“ CanvasImageSource”类型的参数。类型“ HTMLElement”缺少类型“ HTMLVideoElement”中的以下属性：height，msHorizo​​ntalMirror，msIsLayoutOptimalForPlayback，msIsStereo3D和80个以上的属性。ts（2345）

但是我没有在控制台中显示任何错误。我可以将图像加载到画布内的HTML上（这样就可以了）。

这是我的ts：

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（页面上没有所有画布）时，或者是否有输入。

任何帮助表示赞赏。

Answer 1

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

该ctx.drawImage方法期望：

HTMLOrSVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap;

如果您P43是画布，则必须执行以下操作：

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

如果是图像元素：

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