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

【问题标题】：Argument of type 'HTMLElement' is not assignable to parameter of type 'CanvasImageSource'“HTMLElement”类型的参数不能分配给“CanvasImageSource”类型的参数
【发布时间】：2019-09-24 18:25:57
【问题描述】：

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

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

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

感谢任何帮助。

【问题讨论】：

id P43 的元素是画布还是图像元素？
您需要使用类型保护缩小img 的类型或强制转换它。

标签： angular typescript visual-studio-code

【解决方案1】：

您必须告诉编译器 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，因此不再需要显式转换：

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

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

【讨论】：

【解决方案2】：

您需要告诉 TS 编译器您在组件中使用的特定类型的 HTML 元素。

在这里，您正在查询文档对象并获取一些元素并在这些元素上调用一些方法。由于 TypeScript 无法推断这些元素的类型并因此产生编译器错误，因此需要明确说明 Type。

试试这个：

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: HTMLCanvasElement) => {
      const ctx =  <CanvasRenderingContext2D> c.getContext('2d');
      const img = <HTMLImageElement> document.getElementById('P43');
      ctx.drawImage(img, 0, 0, 106, 50);
    });
  }
}

【讨论】：

【解决方案3】：

如果您无法使用 as HTMLImageElement，您可以根据需要使用此语法来 cunstruct 图像，它对我有用：

var img = new Image(); // Image constructor
img.src = 'image.png';
img.alt = 'alt';

那么你可以使用：

 ctx.drawImage(img,0,0);

来源： https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement#example

【讨论】：