如何让Canvas等待图片加载完成后再绘制？解决尺寸异常问题

嘿，我看你遇到的问题核心就是图片加载时机不对，还夹杂了一个小的上下文获取错误，咱们直接来修正并解释：

问题根源分析 #

1. 你现在在img.onload回调外面就设置了canvas.width = img.width和canover.width = img.height，这时候图片还没开始加载（甚至还没设置src），img.width和img.height默认是0或者无效值，自然会导致画布尺寸不对，图片绘制后变小。
2. 代码里let ctxover = canvas.getContext('2d');写错了！应该是拿canover的上下文，不然你的覆盖层和原图会画在同一个Canvas上，完全达不到分层标记的效果。

修正后的完整代码 #

// 获取两个Canvas元素
let canvas = document.getElementById('c');
let ctx = canvas.getContext('2d');
let canover = document.getElementById('cover');
let ctxover = canover.getContext('2d'); // 这里修正为canover的上下文

let img = new Image();
// 如果是跨域图片，需要添加这个属性避免绘制报错（可选，根据你的图片来源决定）
// img.crossOrigin = 'anonymous';

// 绑定加载完成回调后，再设置图片地址
img.onload = function () {
    // 只有图片加载完成后，才能拿到正确的宽高，用来设置Canvas尺寸
    canvas.width = img.width;
    canvas.height = img.height;
    canover.width = img.width;
    canover.height = img.height;

    // 绘制原图到底层Canvas
    ctx.drawImage(img, 0, 0);

    // 在顶层Canvas绘制标记区域
    ctxover.fillRect(0, 0, 10, 10);
    ctxover.fillRect(0, 20, 10, 10);
    ctxover.fillRect(20, 0, 10, 10);
    ctxover.fillRect(20, 20, 10, 10);
};

// 最后设置图片地址，确保onload回调已经绑定
img.src = '你的图片URL'; // 替换成你的实际图片地址

关键要点说明 #

• 回调时机：所有依赖图片宽高的操作（设置Canvas尺寸、绘制图片）都必须放在img.onload里面，这个回调只会在图片完全加载完成后触发，此时img.width和img.height才是正确的实际尺寸。
• 分层上下文：一定要确保底层Canvas和顶层覆盖Canvas各自使用自己的绘图上下文，这样标记不会影响原图，后期修改标记也更方便。
• src设置顺序：先绑定onload回调，再设置img.src，避免因为图片被浏览器缓存，导致onload回调来不及绑定就触发，最终代码不执行的情况。

额外小提示 #

如果需要让Canvas自适应页面容器，可以在img.onload里计算缩放比例，比如：

// 假设容器的宽高是containerWidth和containerHeight
const scale = Math.min(containerWidth / img.width, containerHeight / img.height);
canvas.width = img.width * scale;
canvas.height = img.height * scale;
canover.width = canvas.width;
canover.height = canvas.height;
// 绘制时应用缩放
ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);
// 标记区域也要按比例缩放
ctxover.fillRect(0 * scale, 0 * scale, 10 * scale, 10 * scale);
// 其他标记同理

内容的提问来源于stack exchange，提问作者DeltaP