使用JavaScript在图像上放置生成的条形码

我正在使用JsBarcode JavaScript库生成条形码。我想将此条形码放置在图像上的特定位置，然后下载图像。我该怎么做

我将数据存储在CloudFireStore中，然后使用文档id生成128代码。使用JSBarcode，我可以获取id并生成条形码，但我不知道如何将该条形码放置在特定位置的图像上，然后下载图像

很抱歉，我没有遵守任何Stackoverflow规则，因为我是新来的

以下是html代码：

<svg id="barcode"></svg>

---

从评论中复制我的答案，现在问题又开始了：

---

我以前没有这样做过，但首先想到的是使用HTML画布来绘制图像。然后，您可以在画布上获取SVG，为其指定正确的宽度/高度。然后，您可以将画布添加到img并显示它。

堆栈溢出不会为您编写代码。到目前为止，您尝试了什么来满足您的需求，以及您在尝试中具体遇到了哪些困难？根据Stack Overflow的指导原则，将您的代码显示为一个脚本。@esqew OP是如何要求任何人为其编写代码的？我认为问题很清楚：如何将SVG放置在图像上进行打印？@mr.soserrence回答您的问题：我以前没有这样做过，但首先想到的是使用HTML画布绘制图像。然后，您可以在画布上获取SVG，为其指定正确的宽度/高度。然后，您可以将画布添加到img并显示它。

db.collection("qrcode").add({
            category: category_item,
        }).then(function (docRef) {
            db.collection("qrcode").doc(docRef.id).update({
                category: category_item,
                collected_by: "-",
                date: new firebase.firestore.Timestamp.now().seconds * 1000,
                id: docRef.id,
                item: item,
                status: "Pending",
            }).then(function () {
                window.alert("Data added successfully!");
            }).catch(function (error) {
                window.alert("There was some error. Please try again.");
                console.log(error.code);
                console.log(error.message);
            });
            JsBarcode("#barcode", docRef.id); //Generating the barcode here
        }).catch ...