使用JavaScript实现Canvas验证码时背景图首次加载不显示的问题

嘿，这个问题我太熟了——根源在于图片加载是异步操作，你原代码里设置background.src后，没等图片完全下载完成就开始绘制Canvas，这时候图片还没准备好，自然画不出背景。而刷新页面时，浏览器已经缓存了这张图片，加载速度极快，所以能正常显示。

修复方案：利用onload事件等待图片加载完成 #

你需要把绘制背景（以及后续验证码的绘制逻辑）放在图片的onload回调函数里，这样只有当图片完全加载好后，才会执行绘制操作。

修正后的完整代码示例：

var code = {};
function canvas() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    var background = new Image();
    // 先绑定onload事件，再设置src（避免图片从缓存加载时跳过事件）
    background.onload = function() {
        // 图片加载完成后，绘制背景到Canvas
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
        
        // 在这里继续编写你的验证码绘制逻辑（比如生成随机字符、绘制干扰线等）
        // 示例：绘制一个随机验证码字符
        ctx.font = '20px Arial';
        ctx.fillStyle = '#333';
        ctx.fillText(Math.random().toString(36).substring(2, 6), 20, 30);
    };
    
    // 处理图片加载失败的情况（可选，但很实用）
    background.onerror = function() {
        console.error('背景图片加载失败');
        // 可以在这里设置一个默认背景色或者备用图片
        ctx.fillStyle = '#f5f5f5';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    };
    
    background.src = "http://gazell.io/wp-content/upl..."; // 替换为你的实际图片URL
}

关键注意点 #

• 一定要先绑定onload事件，再设置src：如果先设置src，图片可能已经从缓存加载完成，导致onload事件不会触发。
• 加上onerror回调：避免因为图片链接失效、跨域等问题导致Canvas完全空白，提升用户体验。
• 如果你的验证码还有其他绘制逻辑（比如干扰线、随机字符），一定要把这些逻辑放在onload回调内部，确保背景图绘制完成后再叠加验证码内容。

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