如何让 Canvas 等待图像加载

Question

我正在通过我的 REST API 将图像加载到我的前端。现在我想在坐标的帮助下标记图像上的特定区域。我唯一的想法是在画布上绘制图像并在更高级别的画布上绘制标记区域。每次我加载图片时，它都会以不同的较小尺寸绘制在画布上。我认为它在图像完全加载之前与画布绘图有关，但我还没有弄清楚如何让它工作。

let canvas = document.getElementById('c');
let ctx = canvas.getContext('2d');
let canover = document.getElementById('cover');
let ctxover = canvas.getContext('2d');

let img = new Image();
img.onload = function () {
    ctx.drawImage(img, 0, 0);
    ctxover.fillRect(0,0,10,10);
    ctxover.fillRect(0,20,10,10);
    ctxover.fillRect(20,0,10,10);
    ctxover.fillRect(20,20,10,10);
}
canvas.width = img.width;
canvas.height = img.height;
canover.width = img.width;
canover.height = img.height;

我查看了 img.height 和 img.width ，但它们通常是错误的。因此，我正在寻找一种仅在图像完全加载后才开始绘图的简单方法。我尝试使用 fetch 获取图像然后绘制它，但我无法正确处理。

Answer 1

您似乎在 onload 处理程序执行之前设置了画布尺寸。尝试在 onload 处理程序中将画布尺寸设置为图像尺寸。