由于HTMLCanvasElement无法在Canvas上使用

如何解决由于HTMLCanvasElement无法在Canvas上使用

此代码可行！但发出警告

参数类型HTMLElement无法分配给参数类型CanvasImageSource

function flipImage() {
            const img = document.getElementById("img_v");
            const ctx = img.getContext('2d');
            ctx.setTransform(1,-1,img.height);
            ctx.scale(-1,1);
            ctx.drawImage(img,-img.width,0);
        }

<canvas id="img_v"></canvas>

因此，我已修复但两个代码无法正常工作！

警告已删除

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

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

我该如何解决？

解决方法

我认为这是在 JavaScript 中而不是在 TypeScript 中。您的第二个示例使用了简单 JavaScript (as HTMLCanvasElement) 中不可用的 TypeScript 功能。

要消除 JavaScript 中的警告（并根据类型提供更好的建议），您必须首先检查 getElementById() 返回的元素是否为正确类型（在您的情况下为 {{1} }).

因此您需要将函数更改为如下所示：

HTMLCanvasElement

function flipImage() {
  const img = document.getElementById("img_v");
  if (img instanceof HTMLCanvasElement) {
    const ctx = img.getContext('2d');

    // Draw sample image just so we know the example is working
    const image = new Image(50,50);
    image.src = 'https://i1.sndcdn.com/artworks-YBYtb3jTuIvHpI84-J01Dng-t300x300.jpg';
    ctx.drawImage(image,0);

    // Continue from here
    ctx.setTransform(1,-1,img.height);
    ctx.scale(-1,1);
    ctx.drawImage(img,-img.width,0);
  }
}

flipImage();

这应该可以消除您看到的警告，并为 <canvas id="img_v"></canvas> 对象提供更好的建议。