Website-Suche

angular - Argument des Typs 'HTMLElement' kann dem Parameter des Typs 'CanvasImageSource' nicht zugewiesen werden

Ich versuche, dass dasselbe Bild in alle Canvas auf meiner HTML-Seite geladen wird. Ich hatte zuvor meine gesamte Webseite in JavaScript geschrieben, aber jetzt lerne ich Angular und TypeScript.

Ich erhalte diesen Fehler, der in Visual Studio Code hervorgehoben wird:

Argument des Typs 'HTMLElement' ist nicht dem Parameter des Typs 'CanvasImageSource' zuweisbar. Der Typ 'HTMLElement' fehlt die folgenden Eigenschaften des Typs 'HTMLVideoElement': height, msHorizontalMirror, msIsLayoutOptimalForPlayback, msIsStereo3D und 80 weitere.ts(2345)

Aber ich bekomme keinen Fehler in der Konsole angezeigt. Ich kann das Bild im HTML innerhalb des Canvas laden (also es funktioniert).

Das ist mein 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 markiert den Fehler in dieser Zeile ctx.drawImage(img,0,0,106,50); //(image, offsetx, offsety, x, y), es markiert img und zeigt den Fehler an.

Ich habe versucht, danach zu suchen, aber die einzigen Lösungen, die ich gefunden habe, sind für den Fall, dass man die ID für das Tag hat (ich habe sie nicht, da alles auf der Seite Canvas ist) oder wenn es ein Eingabefeld gibt.

Jede Hilfe wird geschätzt.

Antwort #1

Sie müssen dem Compiler mitteilen, dass die img-Variable als HTMLImageElement gesetzt wird.

Die ctx.drawImage-Methode erwartet ein :

HTMLOrSVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap;

Wenn Ihr P43 eine Leinwand ist, müssen Sie Folgendes tun:

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

wenn es ein Bildelement ist:

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

Es wäre noch besser, tatsächlich zu überprüfen, dass das Element tatsächlich der richtige Typ von Element ist. Das können Sie mit instanceof tun. Auch der TypeScript-Compiler wird die if-Anweisung erkennen, und innerhalb der if-Anweisung wird die img-Variable für den Compiler ein HTMLCanvasElement sein, sodass explizite Typumwandlung nicht mehr erforderlich ist:

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

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

Antwort #2

Sie müssen dem TS-Compiler die spezifischen Typen der HTML-Elemente mitteilen, die Sie in Ihrer Komponente verwenden.

Hier fragen Sie das Dokumentobjekt ab und erhalten ein bestimmtes Element und rufen einige Methoden an diesen Elementen auf. Da TypeScript die Typen dieser Elemente nicht ableiten kann und daher Compilerfehler erzeugt, muss der Typ explizit angegeben werden.

Versuche das:

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

Verwandte Artikel