Barcode Generator and Scanner

PUBLISHED

Overview

This article demonstrates 1D(CODE39 and CODE 2 of 5 Interleaved) and 2D barcode(QR Code and PDF417) generator and scanner features in web applications. It uses thrid party JavaScript and jQuery libraries available. Below are the links for JS and JQuery libraries used for generator and scanner of these barcodes.

1D Barcode Creation:

https://jquery-barcode.googlecode.com/svn/trunk/jquery-barcode/demo/jque...,

https://jqueryjs.googlecode.com/files/jquery-1.3.2.js

1D Barcode Scanner:

https://raw.github.com/EddieLa/BarcodeReader/master/src/DecoderWorker.js

QR Code Creation:

http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/qrcode.js,

http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/sample.js

QR Code Scanner:

http://www.webqr.com/llqrcode.js

http://www.webqr.com/webqr.js

PDF417 Creation:

https://raw.github.com/bkuzmic/pdf417-js/master/bcmath-min.js,

https://raw.github.com/bkuzmic/pdf417-js/master/pdf417-min.js

Barcode HTML Page

Web Application consists of five pages each divided into different sections like content area, tabbed menu in header for 1D, QR, PDF417 barcodes and footer with tabbed menu for generator and scanner for each type of barcode mentioned in the header. To create tabbed menu horizontally aligned in header the below code is used.

<div data-role="header" data-position="fixed">
  <div data-role="tabbar">
    <ul>
      <li><a href="#barcodeGenerator">1D Barcode</a></li>
      <li><a href="#qrGenerator">QR Code</a></li>
      <li><a href="#pdfGenerator">PDF417 Code</a></li>
    </ul>
  </div>
</div>

1D Barcode Generator Page

Html

The content area consists of two input fields, two buttons associated with each of the input fields and div element which displays the generated barcode corresponding to the code entered in the input field when the button is clicked. The below code is for creating both CODE39 and CODE 2 of 5 Interleaved 1D barcodes.

<script type="text/javascript" src="https://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="https://jquery-barcode.googlecode.com/svn/trunk/jquery-barcode/demo/jquery.barcode.0.3.js"></script>
<div data-role="content">
  <h4>CODE 39:</h4>
  <input type="text" id="code_39" size="16" />
  <a data-inline="true" data-role="button" onclick="generateC39();" style="float: right; top: -47px;">Generate Barcode</a> </br>
  <div class="barcode39" style="width: 340px; height: 50px; border: 1px solid red; position: absolute;"></div>
  </br> </br> </br>
  <h4>CODE 2 of 5 Interleaved:</h4>
  <input type="text" id="code_i25" size="16" />
  <a data-inline="true" data-role="button" onclick="generateI25();" style="float: right; top: -47px;">Generate Barcode</a></br>
  <div class="barcodeI25" style="width: 340px; height: 50px; border: 1px solid red; position: absolute;"></div>
</div>
JavaScript

The below script should be added under head tag. Depending on the button clicked, generateC39() or generateI25() are called and the input given in the text box is taken to generate corresponding barcode.

<script type="text/javascript">
$(document).ready(function() {
  generateC39 = function() {
    $('.barcode39').barcode({
      code : 'code39'
    });
  };
  generateI25 = function() {
    $('.barcodeI25').barcode({
      code : 'I25'
    });
  };
});
</script>

1D Barcode Scanner Page

Html

The content area consists of barcode image which should be scanned, a button with event handler which takes the image path to decode and div element to display the result.

<script type="text/javascript" src="https://raw.github.com/EddieLa/BarcodeReader/master/src/DecoderWorker.js"></script>
<img src="barcode1.jpg" id="Image" />
 </br>
<a data-role="button" data-inline="true" id="Decode">Decode</a>
 </br>
<div id="Result"></div>

QR Code Generator Page

The content area consists of textarea to take input from user and generate QR code for it. When button is clicked update_qrcode() is called and the input from textarea is taken. The generated QR code is displayed in a div element.

<script type="text/javascript" src="http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/qrcode.js"></script>
<script type="text/javascript" src="http://d-project.googlecode.com/svn/trunk/misc/qrcode/js/sample.js"></script>
<div data-role="content">
  </br>
  <center>
    <form>
       <textarea name="msg" rows="10" cols="40">Hello World!</textarea>
       <br> <a data-role="button" data-inline="true" onclick="update_qrcode()">Generate Qr</a> <br>
       <div id="qr"></div>
    </form>
  </center>
</div>

QR Code Scanner Page

Html

The content area consists of image to be decoded, button to trigger the function which decodes the image and div element to display the decoded result.

<script type="text/javascript" src="http://www.webqr.com/llqrcode.js"></script>
<script type="text/javascript" src="http://www.webqr.com/webqr.js"></script>
<div data-role="content">
   <center>
    <div id="mainbody">
      </br>
      <div id="outdiv">
      <img src="qrcode.png" id="qrimage" />
      </div>
     </br>
     <a data-role="button" data-inline="true" id="qrimg" onclick="setimg()">Decode</a>
     </br>
    </div>
  <div id="result"></div>
  <canvas id="qr-canvas" width="400" height="300"></canvas>
  </center>
</div>
CSS
#qr-canvas {
display: none;
}
#result {
border: solid;
border-width: 1px 1px 1px 1px;
padding: 20px;
width: 70%;
}

PDF417 Generator Page

Html

The content area consists of textarea to take input from user and generate PDF417 code for it. When button is clicked generate_pdf() is called and the input from textarea is taken. The generated PDF417 code is displayed in a div element.

<script type="text/javascript" src="https://raw.github.com/bkuzmic/pdf417-js/master/bcmath-min.js"></script>
<script type="text/javascript" src="https://raw.github.com/bkuzmic/pdf417-js/master/bcmath-min.js"></script>
<div data-role="content">
  </br>
  <textarea id="msg" rows="10" cols="40">Hello World!</textarea>
  </br>
  <center>
    <a onclick="generate_pdf();" data-role="button" data-inline="true">Generate PDF-417 Barcode</a>
  </center>
  </br> </br>
  <center>
    <div id="barcode"></div>
  </center>
</div>
JavaScript

The below code sends the text entered by user to PDF417.init(), generates the barcode, gets the array of it with number of columns, rows and initializes a canvas of required width and height of the barcode and appends the created barcode to the canvas in the content area.

<script type="text/javascript">
function generate_pdf() {
  var msg = document.getElementById('msg').value;
  $('#barcode').empty();
  PDF417.init(msg);
  var barcode = PDF417.getBarcodeArray();
  var bw = 1;
  var bh = 1;
  var canvas = document.createElement('canvas');
  canvas.width = bw * barcode['num_cols'];
  canvas.height = bh * barcode['num_rows'];
  document.getElementById('barcode').appendChild(canvas);
  var ctx = canvas.getContext('2d');
  var y = 0;
  for ( var r = 0; r < barcode['num_rows']; ++r) {
    var x = 0;
    for ( var c = 0; c < barcode['num_cols']; ++c) {
      if (barcode['bcode'][r][c] == 1) {
        ctx.fillRect(x, y, bw, bh);
      }
      x += bw;
    }
    y += bh;
  }
}
</script>

Screenshots

1D Barcode Generator and QR Code Scanner

 

 

File attachments: 
Package icon barcode.zip