Creating Code 39 Barcodes in Pure Javascript

Posted by Kris Bailey
January 24, 2009

There are many different barcode standards and code 39 is one that is easy to use, supported by most scanners, and can encode letters, numbers, spaces, and some punctuation. For these reasons it makes it a good choice for many different scenarios.

There are a lot of ways you can create barcodes on your own. You can get a special font for it. You can get special software. You can write server side generation logic in a host of different languages. The server side generators can use a font, or generate it manually. Continue on to learn how to do it on the fly in javascript.


Example:

<-- type here

Type something in the box above.
Images
The the url's for the black and white gif images are pointing to the images on this site, to guarantee that whatever you use this for does not unexpectedly stop working you will want to download the images and put them on your own server. Here they are:

White
Black

Code

  1. function print_html_code39_barcode(
  2. 	content,
  3. 	height,
  4. 	insertCheckDigit,
  5. 	printContent,
  6. 	fontPointSize,
  7. 	thinBarWidth,
  8. 	barWidthRatio){
  9.  
  10. 	content = content.toUpperCase();
  11.  
  12. 	if (isNaN(thinBarWidth)) thinBarWidth = 1;
  13. 	if (isNaN(barWidthRatio)) barWidthRatio = 3;
  14.  
  15. 	var thin = thinBarWidth;
  16. 	var thick = thinBarWidth*barWidthRatio;
  17. 	var last = thick*0.66;
  18.  
  19. 	var whiteImageURL = 'http://www.krisbailey.com/images/white.gif';
  20. 	var blackImageURL = 'http://www.krisbailey.com/images/black.gif';
  21.  
  22. 	var thinWhiteBar = "<img src='"+whiteImageURL+"' height='"+height+"' width='"+thin+"'>";
  23. 	var thinBlackBar = "<img src='"+blackImageURL+"' height='"+height+"' width='"+thin+"'>";
  24. 	var thickWhiteBar = "<img src='"+whiteImageURL+"' height='"+height+"' width='"+thick+"'>";
  25. 	var thickBlackBar = "<img src='"+blackImageURL+"' height='"+height+"' width='"+thick+"'>";
  26. 	var lastBar = "<img src='"+whiteImageURL+"' height='"+height+"' width='"+last+"'>";
  27.  
  28. 	// this is the definition array for what bar
  29. 	// combinations correspond to what characters.
  30. 	// definition is as follows:
  31. 	// 0 = thin white (blank) bar
  32. 	// 1 = thin black bar
  33. 	// 2 = thick white (blank) bar
  34. 	// 3 = thick black bar
  35. 	// the 10th digit is for calculating the check digit
  36. 	// so, the letter A is:
  37. 	// [3,0,1,0,1,2,1,0,3,10]
  38. 	// which means:
  39. 	//	thick black bar
  40. 	//	thin white
  41. 	//	thin black
  42. 	//	thin white
  43. 	//	thin black
  44. 	//	thick white
  45. 	//	thin black
  46. 	//	thin white
  47. 	//	thick black
  48. 	// and the check digit calculation value is 10
  49.  
  50. 	var codes = {
  51. 		'0' : [1,0,1,2,3,0,3,0,1,0],
  52. 		'1' : [3,0,1,2,1,0,1,0,3,1],
  53. 		'2' : [1,0,3,2,1,0,1,0,3,2],
  54. 		'3' : [3,0,3,2,1,0,1,0,1,3],
  55. 		'4' : [1,0,1,2,3,0,1,0,3,4],
  56. 		'5' : [3,0,1,2,3,0,1,0,1,5],
  57. 		'6' : [1,0,3,2,3,0,1,0,1,6],
  58. 		'7' : [1,0,1,2,1,0,3,0,3,7],
  59. 		'8' : [3,0,1,2,1,0,3,0,1,8],
  60. 		'9' : [1,0,3,2,1,0,3,0,1,9],
  61. 		'A' : [3,0,1,0,1,2,1,0,3,10], // <-- used in the example above
  62. 		'B' : [1,0,3,0,1,2,1,0,3,11],
  63. 		'C' : [3,0,3,0,1,2,1,0,1,12],
  64. 		'D' : [1,0,1,0,3,2,1,0,3,13],
  65. 		'E' : [3,0,1,0,3,2,1,0,1,14],
  66. 		'F' : [1,0,3,0,3,2,1,0,1,15],
  67. 		'G' : [1,0,1,0,1,2,3,0,3,16],
  68. 		'H' : [3,0,1,0,1,2,3,0,1,17],
  69. 		'I' : [1,0,3,0,1,2,3,0,1,18],
  70. 		'J' : [1,0,1,0,3,2,3,0,1,19],
  71. 		'K' : [3,0,1,0,1,0,1,2,3,20],
  72. 		'L' : [1,0,3,0,1,0,1,2,3,21],
  73. 		'M' : [3,0,3,0,1,0,1,2,1,22],
  74. 		'N' : [1,0,1,0,3,0,1,2,3,23],
  75. 		'O' : [3,0,1,0,3,0,1,2,1,24],
  76. 		'P' : [1,0,3,0,3,0,1,2,1,25],
  77. 		'Q' : [1,0,1,0,1,0,3,2,3,26],
  78. 		'R' : [3,0,1,0,1,0,3,2,1,27],
  79. 		'S' : [1,0,3,0,1,0,3,2,1,28],
  80. 		'T' : [1,0,1,0,3,0,3,2,1,29],
  81. 		'U' : [3,2,1,0,1,0,1,0,3,30],
  82. 		'V' : [1,2,3,0,1,0,1,0,3,31],
  83. 		'W' : [3,2,3,0,1,0,1,0,1,32],
  84. 		'X' : [1,2,1,0,3,0,1,0,3,33],
  85. 		'Y' : [3,2,1,0,3,0,1,0,1,34],
  86. 		'Z' : [1,2,3,0,3,0,1,0,1,35],
  87. 		'-' : [1,2,1,0,1,0,3,0,3,36],
  88. 		'.' : [3,2,1,0,1,0,3,0,1,37],
  89. 		' ' : [1,2,3,0,1,0,3,0,1,38],
  90. 		'*' : [1,2,1,0,3,0,3,0,1,39],
  91. 		'$' : [1,2,1,2,1,2,1,0,1,40],
  92. 		'/' : [1,2,1,2,1,0,1,2,1,41],
  93. 		'+' : [1,2,1,0,1,2,1,2,1,42],
  94. 		'%' : [1,0,1,2,1,2,1,2,1,43]
  95. 	};
  96.  
  97. 	var tw = 0;
  98. 	var sum = 0;
  99. 	for (var ee=0; ee<content.length; ee++){
  100. 		var tcodes = codes[content.charAt(ee)];
  101. 		if (typeof tcodes!='undefined'){
  102. 			sum += tcodes[9];
  103. 		}
  104. 	}
  105.  
  106. 	if (insertCheckDigit){
  107. 		var checksum = sum%43;
  108. 		for (x in codes){
  109. 			if (codes[x][9]==checksum){
  110. 				content = content+x;
  111. 			}
  112. 		}
  113. 	}
  114.  
  115. 	content = '*'+content+'*';
  116.  
  117. 	var htmlout = "<"+"table border='0' cellpadding='1' cellspacing='1'>";
  118. 	htmlout += "<"+"tr><"+"td align='center'><nobr>";
  119.  
  120. 	for (var i=0; i<content.length; i++){
  121. 		tcodes = codes[content.charAt(i)];
  122. 		if (typeof tcodes!='undefined'){
  123. 			for (var xi=0; xi<9; xi++){
  124. 				switch (tcodes[xi]){
  125. 					case 0:
  126. 						htmlout += thinWhiteBar;
  127. 					break;
  128. 					case 1:
  129. 						htmlout += thinBlackBar;
  130. 					break;
  131. 					case 2:
  132. 						htmlout += thickWhiteBar;
  133. 					break;
  134. 					case 3:
  135. 						htmlout += thickBlackBar;
  136. 					break;
  137. 				}
  138. 			}
  139. 		}
  140. 		htmlout += lastBar;
  141. 	}
  142.  
  143. 	htmlout += "</nobr><"+"/td><"+"/tr>";
  144.  
  145. 	if (printContent){
  146. 		htmlout += "<"+"tr><"+"td align='center' style='font-size: "+fontPointSize+"pt;'>";
  147. 		htmlout += "<nobr>"+content+"</nobr><"+"/td><"+"/tr>";
  148. 	}
  149.  
  150. 	htmlout += "<"+"/table>";
  151. 	return htmlout;
  152. }

Arguments

Use
Include the javascript function in your page somehow, then you can do something as simple as:

  1. <script type="text/javascript">
  2. document.write(print_html_code39_barcode('this is a barcode', 30, false, true, 8));
  3. </script>
That would output the following:

For the best scanning results make sure you print using a laser printer, or if you are scanning directly from a display, use an LCD instead of a CRT.

NOTE: While it is easily possible to do the same thing without the use of images, I chose to use images so I would not have to worry about the interference of CSS styles that might already be associated with DIV or other tags that could have been used instead. Feel free to convert it to using DIV's instead of images if it suits your purpose.

 

JavaScript, Programming

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.

Comments

No comments yet.

Leave a comment

(required)

(required)