Аргумент типа 'HTMLElement' не может быть назначен параметру типа 'CanvasImageSource'

Question

Я пытаюсь получить одно и то же изображение для загрузки на весь холст в моем HTML.Ранее я писал всю свою веб-страницу в javascript, но теперь я изучаю английский и машинописный текст.

Я получаю эту ошибку, выделенную в коде Visual Studio:

Аргумент типа 'HTMLElement'не может быть назначен параметру типа CanvasImageSource.Типу «HTMLElement» не хватает следующих свойств из типа «HTMLVideoElement»: высота, msHorizontMirror, msIsLayoutOptimalForPlayback, msIsStereo3D и еще 80.ts (2345)

Но в консоли не отображается ошибка.Я могу получить изображение для загрузки в 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 Код выделяет ошибку в этой строке ctx.drawImage(img,0,0,106,50); //(image, offsetx, offsety, x, y), он выделяет img и отображает ошибку.

Я пытался найти это, но единственные решения, которые я нашел, - это когда у вас был идентификатор для тега (я не какэто все холст на странице.) или если есть вход.

Любая помощь приветствуется.

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;

Answer 2

Вам необходимо сообщить компилятору TS конкретные типы элементов HTML, которые вы используете в своем компоненте.

Здесь вы запрашиваете объект документа и получаете некоторый элемент и вызываете некоторые методы для этих элементов. Поскольку TypeScript не может определить типы этих элементов и, следовательно, выдает ошибки компилятора, необходимо явно указать тип.

Попробуйте это:

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