Question

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

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

“ HTMLElement”类型的参数无法分配给“ CanvasImageSource”类型的参数。类型“ HTMLElement”缺少类型“ HTMLVideoElement”中的以下属性：height，msHorizontalMirror，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代码突出显示此行ctx.drawImage(img,0,0,106,50); //(image, offsetx, offsety, x, y)上的错误，突出显示 img 并显示错误。

我试图进行搜索，但是找到的唯一解决方案是当您具有标签的ID（页面上没有画布，因为我没有），或者是否有输入。

感谢您的帮助。

Answer 1

您必须告诉编译器将var flagforClick = false; function getData() { if (flagforClick == false) { flagforClick = true; } else { flagforClick = true; } map.on('singleclick', function (evt) { alert("called"); if (flagforClick == true) { document.getElementById("tab_content").innerHTML = ""; document.getElementById("dataGrid_tab").innerHTML = ""; totalLayerDataSelectionSelection = []; totalheaderSelectionSelection = []; var headerdataSelection = []; var infodataSelection = []; layerSelectionforList = []; } }); }变量设置为img。

HTMLImageElement方法要求使用：

ctx.drawImage

如果您的HTMLOrSVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap;是画布，则必须这样做：

P43

如果它是图像元素：

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

Answer 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);
    });
  }
}

Answer 3

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

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

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

3 个答案: