Imprimindo Código de Barras no HTML usando JavaScript e CSS

1 - Crie um arquivo JavaScript com o código abaixo, ex. codigoDeBarras.js.

// ===> INICIO DO CODIGO

var BARS = [ 212222, 222122, 222221, 121223, 121322, 131222, 122213,
   122312, 132212, 221213, 221312, 231212, 112232, 122132, 122231,
   113222, 123122, 123221, 223211, 221132, 221231, 213212, 223112,
   312131, 311222, 321122, 321221, 312212, 322112, 322211, 212123,
   212321, 232121, 111323, 131123, 131321, 112313, 132113, 132311,
   211313, 231113, 231311, 112133, 112331, 132131, 113123, 113321,
   133121, 313121, 211331, 231131, 213113, 213311, 213131, 311123,
   311321, 331121, 312113, 312311, 332111, 314111, 221411, 431111,
   111224, 111422, 121124, 121421, 141122, 141221, 112214, 112412,
   122114, 122411, 142112, 142211, 241211, 221114, 413111, 241112,
   134111, 111242, 121142, 121241, 114212, 124112, 124211, 411212,
   421112, 421211, 212141, 214121, 412121, 111143, 111341, 131141,
   114113, 114311, 411113, 411311, 113141, 114131, 311141, 411131,
   211412, 211214, 211232, 23311120 ], START_BASE = 38, STOP = 106;

var fromType = {
   A : function(charCode) {
      if (charCode >= 0 && charCode < 32)
         return charCode + 64;  
      if (charCode >= 32 && charCode < 96)
         return charCode - 32;
      return charCode;
   },
   B : function(charCode) {
      if (charCode >= 32 && charCode < 128)
         return charCode - 32;
      return charCode;
   },
   C : function(charCode) {
      return charCode;
   }
};

function code128(code, allSpace, barcodeType) {
   if (barcodeType == undefined)
      barcodeType = code128Detect(code);
   if (allSpace == undefined)
      allSpace = 180;  
   if (barcodeType == 'C' && code.length % 2 == 1)
      code = '0' + code;

   var a = parseBarcode(code, barcodeType);
   var b = a.join('');
   var sb = [];
   var codeBarSpace = 2;
    //alert(b + " - " + b.length);  

   for ( var pos = 0; pos < b.length; pos += 2) {
      sb.push(' <div class="divCode bar' + b.charAt(pos) + ' space' + b.charAt(pos + 1) + '"></div>');

      codeBarSpace = ( codeBarSpace + (parseInt(b.charAt(pos + 1)) + parseInt(b.charAt(pos))) );
   }

   var margin = (parseInt(allSpace)-codeBarSpace)/2;

   return '<div width="' + codeBarSpace + 'px" style="margin: 0 ' + margin + ';">' + sb.join('') + '<br/><br/><label class="labelCode">' + code + '</label></div>';
}

function code128Detect(code) {
   if (/^[0-9]+$/.test(code))
      return 'C';
   if (/[a-z]/.test(code))
      return 'B';
   return 'A';
}

function parseBarcode(barcode, barcodeType) {

   var bars = [];

   bars.add = function(nr) {

      var nrCode = BARS[nr];
      this.check = this.length == 0 ? nr : this.check + nr * this.length;
      this.push(nrCode || format("UNDEFINED: %1->%2", nr, nrCode));

   };

   bars.add(START_BASE + barcodeType.charCodeAt(0));

   for ( var i = 0; i < barcode.length; i++) {
      var code = barcodeType == 'C' ? +barcode.substr(i++, 2) : barcode .charCodeAt(i); converted = fromType[barcodeType](code);  

      if (isNaN(converted) || converted<0 || converted>106)
         throw new Error( format("Unrecognized character (%1) at position %2 in code '%3'.", code, i, barcode));

      bars.add(converted);
   }

   bars.push(BARS[bars.check % 103], BARS[STOP]);

   return bars;
}

// ===> FIM DO CODIGO

2 - Crie um arquivo CSS com o código abaixo, ex. imprimirCodigoDeBarras.css.

/* ===> INICIO DO CODIGO*/

@CHARSET "UTF-8";

 .divCode {
     float: left;
     height: 0.45in;   /*size*/
 }

.labelCode {
    text-align: center;
    font-size: small;
}

.bar1 {border-left: 1px solid black;}
.bar2 {border-left: 2px solid black;}
.bar3 {border-left: 3px solid black;}
.bar4 {border-left: 4px solid black;}

.space0    {margin-right: 0px;}
.space1    {margin-right: 1px;}
.space2    {margin-right: 2px;}
.space3    {margin-right: 3px;}
.space4    {margin-right: 4px;}

/* ===> FIM DO CODIGO*/

3 - Inclua em seu arquivo HTML os codigos acimas criados.

<header>
        <title></title>
        <script src="../../js/default/codigoDeBarras.js" type="text/javascript"/>
        <link href="../../css/imprimirCodigoBarras.css" type="text/css" rel="stylesheet"/>
</header>

4 - No mesmo arquivo HTML utilizar as funções JavaScript para gerar o Código de Barras. Podendo ser utilizado em qualquer parte do HTML.

<script>

                var codebar = '121212121200';
                var barCode = code128(codebar, '273', 'A');
                //alert(barCode);
                window.document.write(barCode);

</script>

Links: 
http://pt.wikipedia.org/wiki/C%C3%B3digo_de_barras
http://msdn.microsoft.com/pt-br/library/cc580676.aspx

Podem ser gerados Códigos de Barras nos padrões: 128A, 128B ou 128C. Acredito que se possa usar o mesmo código para outros padrões, apenas fazendo os ajustes necessários nas funções do JavaScript.

Desculpe a falta de comentários nos códigos, sei que facilita o entendimento, mas a falta de tempo me impediu de ser mais detalhista.

Aproveitando que estamos falando em imagens...

Uma biblioteca muito boa em Javascript para visualização de dados é D3JS:

https://d3js.org/

enjoy...