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

Stack Overflow won't write your code *for* you. What have you tried so far to meet your requirement, and where *specifically* have you gotten stuck in that attempt? Show us your code as a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) in accordance with Stack Overflow's [How to Ask](https://stackoverflow.com/help/how-to-ask) guidelines. — esqew, Feb 12 '21 at 04:13
@esqew How is OP asking anyone to write the code for them? I think the question was pretty clear: how can you position an SVG over an image for printing? — nVitius, Feb 12 '21 at 04:42
@mr.SoSerious To answer your question: 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](https://stackoverflow.com/questions/3768565/drawing-an-svg-file-on-a-html5-canvas) on the canvas. You can then [convert](https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf) the canvas to an img and display it. — nVitius, Feb 12 '21 at 04:47

score 0 · Answer 1 · answered Feb 12 '21 at 21:02

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.

Placing a generated bar code on an image using JavaScript

1 Answers1