无法将独立Canvas生成的条码添加至主Canvas的问题求助

我帮你排查下问题哈，你现在的思路是对的，但可能卡在图片加载异步或者主Canvas操作缺失这两个点上。先看你给出的代码片段，我帮你补全并修正问题：

问题分析 #

你用JsBarcode生成条码到#barcode Canvas后，尝试转成图片再画到主Canvas，但代码里有两个关键遗漏：

1. 没有监听图片的onload事件——图片加载是异步的，直接设置src后立刻绘制会因为图片未加载完成而失败；
2. 没有获取主Canvas的绘图上下文，根本没对主Canvas进行绘制操作。

解决方案1：直接绘制Canvas（推荐，更高效） #

其实不需要把条码Canvas转成图片，drawImage方法可以直接接受Canvas元素作为绘制源，一步到位：

$(document).ready(function() {
    // 1. 用JsBarcode生成条码到条码Canvas
    JsBarcode('#barcode', "1234", { 
        width: 4, 
        height: 20
        // displayValue: false // 不需要显示条码下方文字的话可以打开这个注释
    });

    // 2. 获取两个Canvas元素和主Canvas的绘图上下文
    const barcodeCanvas = document.getElementById("barcode");
    const mainCanvas = document.getElementById("mainCanvas");
    const mainCtx = mainCanvas.getContext("2d");

    // 3. 直接把条码Canvas绘制到主Canvas上
    // 参数分别是：源Canvas、绘制起始X坐标、起始Y坐标
    mainCtx.drawImage(barcodeCanvas, 50, 50);
    // 如果需要缩放，可改成：mainCtx.drawImage(barcodeCanvas, 50, 50, 200, 100)
});

解决方案2：转成Image绘制（适合需要对图片额外处理的场景） #

如果确实需要把条码转成Image对象再绘制，一定要监听onload事件确保图片加载完成：

$(document).ready(function() {
    JsBarcode('#barcode', "1234", { 
        width: 4, 
        height: 20
    });

    const barcodeCanvas = document.getElementById("barcode");
    const mainCanvas = document.getElementById("mainCanvas");
    const mainCtx = mainCanvas.getContext("2d");

    const barcodeImg = new Image();
    // 避免跨域报错（同源环境下可省略，但加上更稳妥）
    barcodeImg.crossOrigin = "anonymous";
    barcodeImg.src = barcodeCanvas.toDataURL("image/png");

    // 必须等图片加载完成后再绘制
    barcodeImg.onload = function() {
        mainCtx.drawImage(barcodeImg, 50, 50);
    };
});

关键注意点 #

• 确保主Canvas在HTML中存在，比如：<canvas id="mainCanvas" width="500" height="300"></canvas>；
• JsBarcode生成条码是同步操作，所以不需要额外等待，生成后直接操作即可；
• 优先用方案1，省去图片转换和异步加载的环节，性能更好也更不容易出错。

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