使用 JavaScript 在圖像上放置生成的條形碼

Question

我正在使用 JsBarcode JavaScript 庫來生成條形碼。 我想將此條形碼放在圖像上的特定位置，然后下載圖像。 我怎樣才能做到這一點？

我將數據存儲在 cloud-firestore 中，然后使用 Document id 生成 128 代碼。 使用 JSBarcode，我可以獲取 id 並生成條形碼，但我不知道如何將該條形碼放置在特定位置的圖像上，然后下載圖像。

對不起，如果我沒有遵守任何 Stackoverflow 規則，因為我是新來的。

這是 html 代碼：

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

JavaScript 代碼：

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 ...

Answer 1

從評論中復制我的答案，現在問題再次打開：

我以前不必這樣做，但首先想到的是使用 HTML Canvas 來繪制圖像。 然后，您可以使用 SVG，為其設置正確的寬度/高度，然后將其繪制在 canvas 上。 然后您可以將canvas 轉換為 img 並顯示它。