Canvas绘制QR码不显示但边框正常的技术求助

可能的原因及解决步骤 #

1. 确认userId存在有效内容 #

如果userId为空、undefined或无效字符串，QRCode.js生成的就是空白画布。在生成QR码前添加日志验证：

console.log('当前userId:', userId); // 确认输出非空有效字符串

2. 确保QR码绘制在背景之后 #

你的代码中先填充了白色背景，需保证QR码的drawImage操作在背景填充之后执行，避免被白色背景覆盖。

3. 利用QRCode.js的回调确保绘制完成 #

QRCode.js的构造函数支持回调参数，可在QR码绘制完成后再将其绘制到目标Canvas：

let qrCanvas = document.createElement("canvas");
qrCanvas.width = 100;
qrCanvas.height = 100;

// 使用回调确保QR码绘制完成
new QRCode(qrCanvas, {
    text: userId,
    width: 100,
    height: 100,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
}, function() {
    // 回调内执行drawImage，确保QR码已生成
    ctx2.drawImage(qrCanvas, 300, 80, 100, 100);
});

4. 验证QR码画布本身是否生成 #

临时将qrCanvas添加到页面，确认QR码是否正常生成：

document.body.appendChild(qrCanvas); // 临时添加到页面查看

如果页面上能看到QR码，说明是drawImage环节的问题；如果还是空白，检查userId或QRCode.js的引入。

5. 确认Canvas上下文和元素正确 #

确保canvasBack是正确获取的目标Canvas元素：

const canvasBack = document.getElementById('sampleIDback');
if (!canvasBack) {
    console.error('未找到sampleIDback画布');
    return;
}

修改后的完整背面绘制+QR码示例 #

const canvasBack = document.getElementById('sampleIDback');
if (canvasBack.getContext) {
    const ctx2 = canvasBack.getContext("2d");
    ctx2.fillStyle = "#FFFFFF"; 
    ctx2.fillRect(0, 0, canvasBack.width, canvasBack.height);
    
    // 绘制所有文本和图形（原代码保留）
    ctx2.font = "18px Arial";
    ctx2.fillStyle = "black";
    ctx2.fillText("1. This Library Card is non-transferable.",40,60);
    ctx2.fillText("2. Library users are required to present their library",40,90);
    ctx2.fillText("   card every time they use the library collections.",40,120);
    ctx2.fillText("3. The loss of this ID card must be reported immediately.",40,150);
    ctx2.fillText("   A replacement ID comes with a fee.",40,180);
    ctx2.fillText("4. ID will be confiscated/cancelled for any false",40,210);
    ctx2.fillText("   information given.",40,240);
    ctx2.fillText("Person to be notified in case of emergency:",40,270);
    ctx2.font = "bold 21px Arial";
    ctx2.fillText("NAME:",55,320);
    ctx2.fillText("ADDRESS:",55,360);
    ctx2.fillText("CONTACT NO.:",55,400);
    ctx2.fillText(users.contactName,250,320);
    ctx2.fillText(users.contactAddress,250,360);
    ctx2.fillText(users.contactNum,250,400);    
    ctx2.font = "bold 25px Arial";
    ctx2.fillText("SIGNATURE",160,520);
    ctx2.fillText("ABEL C. ICATLO",620,490);
    ctx2.font = "italic 18px Arial";
    ctx2.fillText("MUSEUM CURATOR I/OIC-LSD",590,520);
    
    //blue图形
    ctx2.beginPath();
    ctx2.moveTo(1000, 1000);
    ctx2.lineTo(0, 600);
    ctx2.lineTo(0, 540);
    ctx2.lineTo(500, 540);
    ctx2.lineTo(650, 420);
    ctx2.lineTo(970, 420);
    ctx2.lineTo(1000, 400);
    ctx2.lineTo(1000, 1000);
    ctx2.stroke();
    ctx2.fillStyle = "#002D624C";
    ctx2.fill();
    
    //yellow left bottom图形
    ctx2.beginPath();
    ctx2.moveTo(0, 540);
    ctx2.lineTo(0, 520);
    ctx2.lineTo(500, 520);
    ctx2.lineTo(470, 540);
    ctx2.lineTo(0, 540);
    ctx2.stroke();
    ctx2.fillStyle = "#FFFD374C";
    ctx2.fill();
    
    //yellow right bottom图形
    ctx2.beginPath();
    ctx2.moveTo(1000, 400);
    ctx2.lineTo(700, 400);
    ctx2.lineTo(670, 420);
    ctx2.lineTo(970, 420);
    ctx2.lineTo(1000, 400);
    ctx2.stroke();
    ctx2.fillStyle = "#FFFD374C";
    ctx2.fill();
    
    // 生成并绘制QR码（放在最后，确保不被其他图形覆盖）
    console.log('当前userId:', userId); // 验证userId
    let qrCanvas = document.createElement("canvas");
    qrCanvas.width = 100;
    qrCanvas.height = 100;
    
    new QRCode(qrCanvas, {
        text: userId,
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    }, function() {
        // 绘制QR码到目标Canvas
        ctx2.drawImage(qrCanvas, 300, 80, 100, 100);
        // 可选：临时添加到页面验证
        // document.body.appendChild(qrCanvas);
    });
}

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