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

【问题标题】：Placing a generated bar code on an image using JavaScript使用 JavaScript 在图像上放置生成的条形码
【发布时间】：2021-05-15 20:57:22
【问题描述】：

我正在使用 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 ...

【问题讨论】：

Stack Overflow 不会为您编写代码为。到目前为止，您为满足您的要求做了哪些尝试，以及您具体在哪些尝试中陷入困境？根据 Stack Overflow 的 How to Ask 指南，将您的代码显示为 Minimal, Reproducible Example。
@esqew OP 如何要求任何人为他们编写代码？我认为问题很明确：如何将 SVG 放置在图像上以进行打印？
@mr.SoSerious 回答你的问题：我以前没有这样做过，但首先想到的是使用 HTML Canvas 来绘制图像。然后，您可以获取 SVG，在画布上为其设置正确的宽度/高度和 draw it。然后，您可以将画布convert 转换为 img 并显示它。

标签： javascript firebase google-cloud-firestore jsbarcode

【解决方案1】：

从 cmets 复制我的答案，现在问题再次公开：

我以前没有这样做过，但首先想到的是使用 HTML Canvas 来绘制图像。然后，您可以获取 SVG，在画布上为其设置正确的宽度/高度和 draw it。然后，您可以将画布convert 转换为一个 img 并显示它。

【讨论】：