Placing a generated bar code on an image using JavaScript

Question

I am using the JsBarcode JavaScript library to generate a barcode. I want to place this barcode at a specific place on an image and then download the image. How can I do that?

I am storing data in cloud-firestore and then I use the Document id to generate a 128 code. Using the JSBarcode, I can get the id and generate a barcode but I don't know how to place that barcode on an image at a specific place and then download the image.

Sorry if I didn't follow any Stackoverflow rules because I am new here.

Here's the html code:

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

JavaScript code:

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

Copying my answer from the comments, now that the question is open again:

I haven't had to do this before, but the first thing that comes to mind is using HTML Canvas to draw the image. You can then take the SVG, give it the right width/height and draw it on the canvas. You can then convert the canvas to an img and display it.