“HTMLElement”类型的参数不能分配给“CanvasImageSource”类型的参数
我正在尝试将相同的图像加载到HTML中的所有画布中。我以前用javascript写了我的整个网页，但现在我正在学习角和类型记录。
我在Visual代码中高亮显示了此错误：
类型'HTMLElement‘的参数不能分配给'CanvasImageSource’类型的参数。类型'HTMLElement‘缺少’HTMLVideoElement‘类型中的下列属性:身高、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代码突出显示这行ctx.drawImage(img,0,0,106,50); //(image, offsetx, offsety, x, y)上的错误，它突出显示img并显示错误。
我试图搜索这个，但我找到的唯一解决方案是当您有标签的ID (我没有，因为它是画布‘在页面上“)。或者是否有输入。
任何帮助都是非常感谢的。
回答 3
Stack Overflow用户
发布于 2019-05-07 06:38:04
您必须告诉编译器，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!
}Stack Overflow用户
发布于 2019-05-07 06:38:38
您需要告诉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);
});
}
}Stack Overflow用户
发布于 2021-04-05 11:00:15
如果您不能使用as HTMLImageElement，您可以根据需要使用这个语法来构造图像，它对我起了作用：
var img = new Image(); // Image constructor
img.src = 'image.png';
img.alt = 'alt';然后你可以使用：
ctx.drawImage(img,0,0);Src：https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement#example
https://stackoverflow.com/questions/56016696
复制相似问题
腾讯云开发者
