无法在图像加载时绘制 Canvas 图像

Question

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

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

我在谷歌上搜索了一个多小时，几乎每个解决方案都涉及确保首先加载图像。

这是我所拥有的一些片段。

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 属性。

无法在图像加载时绘制 Canvas 图像

Cannot Draw Canvas Image On Image's Load

javascript

html5-canvas