How to save barcode as image using JavaScript

The Syncfusion Essential JS Barcode control is used to render one-dimension and two-dimension barcodes in webpage. Barcode provides a simple and inexpensive method of encoding text information that can be easily read by electronic readers. Using this control, you can get an image from barcode.

Steps to get an image from barcode programmatically:

1. Add div container for barcode rendering.

   <div id="barcode"></div>
   

2. Use the following code to get an image from barcode. This can be achieved by setting ID to the barcode canvas manually then convert it to image.

   <script type="text/javascript">
       var barcodeCtrl;
       $(function () {
           $("#barcode").ejBarcode({ text: "HTTP://WWW.SYNCFUSION.COM", symbologyType: "qrbarcode", xDimension: 12, });
           barcodeCtrl = $("#barcode").data("ejBarcode");
       });
    
      function Download(link, canvasId, filename){
     link.href = document.querySelector(canvasId).toDataURL();
     link.download = filename;
    }
     
    document.getElementById('download').addEventListener('click', function () {
        Download(this, '#barcode canvas', 'Barcode.png');
    }, false);
     
   </script>
   

By executing the program, you will get the PNG image as follows.

JS Playground link: https://jsplayground.syncfusion.com/osybd0sb

Take a moment to peruse the documentation, where you can find options like customizing the appearance of barcode, rendering one dimensional and two dimensional barcodes with code examples.

See Also:

Convert barcode to image in Windows Forms