typescript “HTMLElement”类型的参数不可分配给“CanvasImageSource”类型的参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56016696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Argument of type 'HTMLElement' is not assignable to parameter of type 'CanvasImageSource'
提问by HymanU
I am trying to get the same image to load into all of the canvas in my HTML. I had previously written my whole webpage in javascript but now I am learning angular and typescript.
我正在尝试将相同的图像加载到我的 HTML 中的所有画布中。我以前用 javascript 编写了我的整个网页，但现在我正在学习 angular 和 typescript。
I am getting this error highlighted in Visual Studio Code:
我在 Visual Studio Code 中突出显示了此错误：
Argument of type 'HTMLElement' is not assignable to parameter of type 'CanvasImageSource'. Type 'HTMLElement' is missing the following properties from type 'HTMLVideoElement': height, msHorizontalMirror, msIsLayoutOptimalForPlayback, msIsStereo3D, and 80 more.ts(2345)
“HTMLElement”类型的参数不可分配给“CanvasImageSource”类型的参数。“HTMLElement”类型缺少“HTMLVideoElement”类型中的以下属性：height、msHorizontalMirror、msIsLayoutOptimalForPlayback、msIsStereo3D 和 80 more.ts(2345)
But I get no error shown in the console. I can get the image to load on the HTML within the canvas (so it is working).
但是我没有在控制台中显示错误。我可以让图像加载到画布内的 HTML 上（所以它可以工作）。
This is my ts:
这是我的 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 highlights the error on this line ctx.drawImage(img,0,0,106,50); //(image, offsetx, offsety, x, y), it highlights imgand displays the error.
VS Code 突出显示此行上的错误ctx.drawImage(img,0,0,106,50); //(image, offsetx, offsety, x, y)，突出显示img并显示错误。
I have tried to search this but the only solutions I have found are for when you had the ID for tag ( I don't as it is all canvas' on the page.) or if there is an input.
我试图搜索这个，但我找到的唯一解决方案是当你有标签的 ID 时（我没有，因为它是页面上的所有画布。）或者是否有输入。
Any help is appreciated.
任何帮助表示赞赏。
回答by Poul Kruijt
You have to tell the compiler that the imgvariable is being set as an HTMLImageElement.
您必须告诉编译器该img变量被设置为HTMLImageElement.
The ctx.drawImagemethod expects a :
该ctx.drawImage方法需要一个：
HTMLOrSVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap;
If your P43is a canvas you have to do:
如果您P43是画布，则必须执行以下操作：
const img = document.getElementById("P43") as HTMLCanvasElement;
if it's an image element:
如果是图像元素：
const img = document.getElementById("P43") as HTMLImageElement;
回答by Ritesh
You need to tell the TS compiler the specific types of HTML elements that you are using in your component.
您需要告诉 TS 编译器您在组件中使用的特定 HTML 元素类型。
Here you are querying the document object and getting some element and calling some methods on those elements. Since TypeScript is unable to infer the types of these element and hence producing compiler errors, the Type need to be explicitly stated.
在这里，您正在查询文档对象并获取一些元素并在这些元素上调用一些方法。由于 TypeScript 无法推断这些元素的类型，因此会产生编译器错误，因此需要明确声明类型。
Try this:
试试这个：
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);
});
}
}
