时间戳

首页 > 解决方案 > “HTMLElement”类型的参数不能分配给“CanvasImageSource”类型的参数

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

问题描述

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

我在 Visual Studio Code 中突出显示了这个错误：

“HTMLElement”类型的参数不能分配给“CanvasImageSource”类型的参数。“HTMLElement”类型缺少“HTMLVideoElement”类型的以下属性：height、msHorizo​​ntalMirror、msIsLayoutOptimalForPlayback、msIsStereo3D 和 80 more.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 时（我没有，因为它在页面上都是画布。）或者如果有输入。

任何帮助表示赞赏。

标签： angulartypescriptvisual-studio-code

解决方案

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

该ctx.drawImage方法需要一个：

HTMLOrSVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap;

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

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

如果是图像元素：

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

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

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

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

推荐阅读