JavaScript实现Canvas图片文字叠加生成贺卡问题求解

• 核心原因是图片加载为异步行为：你给imgFinal设置src后立刻调用drawImage，此时图片还未完成加载解析，canvas无法绘制出背景；后续文字绘制是同步执行的，所以最终效果只有文字显示。
• 代码逻辑存在偏差：你没有调用canvas.toDataURL()导出canvas合成结果，反而直接把未经过合成处理的原始背景图DOM插到页面上，根本没展示canvas生成的合成内容。
• 跨域属性设置无效：你给页面上的预览缩略图设置crossorigin，但实际用来绘图的新建imgFinal对象没加该属性，后续导出dataURL时很容易触发canvas跨域污染报错。
• 存在冗余无效代码：重复声明两次name变量，多余的矩形描边、移除跨域属性的操作都没有实际作用。

• 把所有canvas绘制、导出逻辑放到背景图的onload回调中执行，确保图片完全加载后再执行绘图操作。
• 给实际绘图用的背景Image对象设置crossOrigin = 'anonymous'，避免跨域导致canvas被污染无法导出。
• 绘制完成后调用canvas.toDataURL()拿到合成后的图片base64地址，用该地址创建img元素插入页面，不要直接插入原始背景图。
• 清理冗余代码，增加基础的空值校验，避免用户未填姓名、未选贺卡就提交。

function myFunction() {
    // 获取用户输入姓名
    const name = document.getElementById("name").value.trim();
    if (!name) {
        alert("请输入您的姓名");
        return;
    }
    // 获取用户选中的贺卡
    const cards = document.getElementsByName("Cards");
    let selectedCard = null;
    for (let i = 0; i < cards.length; i++) {
        if (cards[i].checked) {
            selectedCard = cards[i].value;
            break;
        }
    }
    if (!selectedCard) {
        alert("请选择一张贺卡模板");
        return;
    }

    // 初始化canvas
    const canvas = document.createElement('canvas');
    canvas.width = 900;
    canvas.height = 700;
    const ctx = canvas.getContext('2d');

    // 加载选中的贺卡背景图
    const bgImg = new Image();
    // 给绘图用的图片设置跨域属性，避免canvas污染
    bgImg.crossOrigin = 'anonymous';
    bgImg.src = `${selectedCard}.png`;
    
    // 等背景图加载完成后再执行绘制
    bgImg.onload = function() {
        // 先绘制背景图，拉伸适配canvas尺寸
        ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
        // 再绘制用户姓名
        ctx.fillStyle = "#fff";
        ctx.font = "bold 30px serif";
        ctx.textAlign = "center";
        ctx.fillText(name, canvas.width / 2, 550);

        // 导出合成后的图片
        const finalImg = new Image();
        finalImg.className = "my-5";
        finalImg.src = canvas.toDataURL('image/png');
        
        // 将合成好的贺卡插入页面
        const container = document.getElementById("img");
        container.parentNode.insertBefore(finalImg, container.nextSibling);

        // 移除表单区域
        document.getElementById("form").remove();
    }

    // 捕获图片加载异常
    bgImg.onerror = function() {
        alert("贺卡图片加载失败，请刷新页面重试");
    }
}

• 如果直接用file://协议打开本地HTML文件，就算设置了crossOrigin也可能出现跨域报错，建议把项目放到本地Web服务中运行（比如用VSCode的Live Server插件、Nginx托管）即可避免该问题。
• 如果文字的位置、大小、颜色和贺卡模板不匹配，可以自行调整fillText的坐标参数、font字体属性和fillStyle颜色值，适配不同的贺卡样式。

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