Canvas中API生成的二维码无法显示问题求助

核心问题与修正点 #

1. 错误创建图片元素：
   代码中document.createElement("qrImage")是无效写法，HTML不存在该标签，需改为创建标准<img>元素，推荐用new Image()更简洁。

2. onload与src顺序颠倒：
   必须先绑定onload回调，再设置图片src属性——原代码把src设置放在onload内部，导致图片永远无法触发加载完成事件，自然不会绘制到画布上。

3. 内容重叠遮挡：
   原代码中二维码绘制坐标和邮箱文本重合，即使加载成功也会被文本挡住，需调整二维码位置避免重叠。

修正后的完整代码 #

const generateButton = document.getElementById('generate');
const downloadButton = document.getElementById('download');
const canvas = document.getElementById('cardCanvas');
const canvasdiv = document.getElementById('canvas');
const context = canvas.getContext('2d');

generateButton.addEventListener('click', generateImage);
downloadButton.addEventListener('click', downloadImage);

function generateImage() {
    var name_Ar = document.getElementById("name_ar").value;
    var name_Eng = document.getElementById("name_eng").value;

    var jop_Ar = document.getElementById("jop_ar").value;
    var jop_Eng = document.getElementById("jop_eng").value;

    var phone = document.getElementById("phone").value;
    var email = document.getElementById("email").value;
    
    // 修正：创建标准img元素
    var qr_img = new Image();

    // 清除画布
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 背景图片
    const imageData = 'style/images/busseCard.png';
    const sampleImage = new Image();
    // 修正：height补充单位px，style设置不影响drawImage，改为设置图片自身尺寸属性
    sampleImage.width = 2056;
    sampleImage.height = 1000;
    sampleImage.src = imageData;
    
    sampleImage.onload = function () {
        context.drawImage(sampleImage, 0, 0, canvas.width, canvas.height);

        // 添加文本
        context.fillStyle = 'black';
        context.font = 'bold 24px Arial';
        context.textAlign = 'center';

        // 姓名
        context.fillText(name_Ar, canvas.width / 3.2, canvas.height / 2.2);
        context.fillText(name_Eng, canvas.width / 1.5, canvas.height / 2.2);

        // 职位
        context.fillText(jop_Ar, canvas.width / 3.1, canvas.height / 1.9);
        context.fillText(jop_Eng, canvas.width / 1.5, canvas.height / 1.9);

        // 电话
        context.fillText(phone, canvas.width / 3.31, canvas.height / 1.555);
        context.fillText(phone, canvas.width / 1.51, canvas.height / 1.529);

        // 邮箱
        context.fillText(email, canvas.width / 3.31, canvas.height / 1.423);
        context.fillText(email, canvas.width / 1.51, canvas.height / 1.4);

        // 修正：先绑定onload回调，再设置src
        qr_img.onload = function () {
            // 修正：调整坐标避免和邮箱文本重叠，示例下移50px
            context.drawImage(qr_img, canvas.width / 1.51, canvas.height / 1.4 + 50, 150, 150);
        };
        // 对email进行URL编码，避免特殊字符导致API请求失败
        qr_img.src = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" + encodeURIComponent(email);
    };
}

额外优化建议 #

• 用encodeURIComponent处理邮箱参数：避免邮箱中的@、+等特殊字符破坏API请求格式。
• 背景图片的style.width/height设置无效，drawImage会直接使用传入的画布尺寸参数，设置图片自身的width/height属性更合理。

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