无法在图像加载时绘制画布图像 [重复]

Question

我有一个画布，我想在上面画一个图标。我知道在尝试绘制图像之前您必须等待图像加载，但是我尝试过的没有任何效果。

我尝试使用完整的图像 URL（协议、域和路径），我已经移动了所有内容，但没有任何效果。

我已经用谷歌搜索了一个小时的大部分时间，几乎每个解决方案都涉及确保首先加载图像。

这是我所拥有的几个 sn-ps。

const image = new Image()
image.addEventListener('load', _ => {
    addImage(canvas, image, coords)
})
image.src = '/images/image-location.svg'

function addImage(canvas, image, coords) {
    const ctx = canvas.getContext('2d')
    ctx.save()
    ctx.drawImage(image, 0, 0, image.width, image.height, ...coords, 50, 50)
    ctx.restore()
}

我在事件监听器中抛出了一个console.log，只是为了确保它正在触发并且确实触发了。我什至登录了addImage，它肯定能做到这一点。

解决办法是什么？

Answer 1

我发现了我在这里遇到的问题。我需要为我用作图像的 SVG 元素添加 width/height 属性。