如何使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，它们通常是错误的。 因此，我正在寻找一种仅在图像完全加载后才开始绘制的简单方法。 我尝试使用获取来获取图像，然后绘制它，但是我做不正确。

Answer 1

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