ARTICLE AD BOX
Deeply frustrated with this code to generate labels, I want to be able to generate barcodes when a consignment number is put in for the likes of amazon, dpd , DHL....ive tried but the barcode that gets generated comes back as an invalid barcode when its a barcode off a parcel for testing purposes....I get an error message saying the barcode should be between 20-30 lines, I have test scanned these with company scanners to test if the barcodes register but they say invalid barcode but other sites like COGNEX and TECH-IT can generate labels that work,
any help with this would be incredible
see my code,
function generateBarcode() {
let barcodeValue = document.getElementById('barcodeValue').value;
document.getElementById('barcode').innerHTML = "";
let svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
let downloadButton = document.createElement("button");
downloadButton.innerHTML = "Download Barcode as PNG";
downloadButton.setAttribute("id", "downloadButton");
document.getElementById('barcode').appendChild(svgElement);
document.getElementById('barcode').appendChild(downloadButton);
// Generate the barcode
JsBarcode(svgElement, barcodeValue, {
format: "CODE128",
displayValue: true
});
// Add event listener to download the barcode as PNG
downloadButton.addEventListener("click", function () {
svgToPng(svgElement, barcodeValue);
});
}
function svgToPng(svgElement, barcodeValue) {
// Create an image from the SVG content
let svgData = new XMLSerializer().serializeToString(svgElement);
let svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
let url = URL.createObjectURL(svgBlob);
let img = new Image();
img.onload = function () {
// Create a canvas element and draw the image onto it
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Convert the canvas to a PNG and trigger the download
let pngData = canvas.toDataURL("image/png");
let link = document.createElement('a');
link.href = pngData;
link.download = 'barcode_' + barcodeValue + '.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// Clean up the URL object
URL.revokeObjectURL(url);
};
img.src = url;
}
<div class="container">
<h2>Generate Barcode</h2>
<input id="barcodeValue" type="text" placeholder="Enter your label number...">
<button id="generateBarcode" onclick="generateBarcode()"><b>Generate Barcode</b></button>
<div id="barcode"></div>
</div>
