Como generar barcodes lineales y QR barcodes con jQuery en pocas líneas de código

En el artículo anterior Quick Response Barcode o «código de respuesta rápida» perfilamos las dimensiones que tiene y puede alcanzar este tipo de software. También hablamos de la infinidad de servicios que nos permiten generar el código de forma sencilla y transparente ya sea a través de la instalación de un programa o directamente desde la barra de direcciones de nuestro navegador.

Ahora bien, ¿estamos dispuestos a crear códigos qr dependientes de servicios de terceros?

Con jQuery.qrcode generar códigos QR de forma dinámica en nuestro sitio web será muy fácil y tendremos la posibilidad de codificar alrededor de 2900 caracteres (8 bits).

Este plugin permite la creación de códigos QR de dos formas diferentes:

• Dibujándolo sobre un objeto canvas: genera en el elemento que deseemos una etiqueta canvas de HTML5, y luego pinta el código sobre su superficie.
  
  Funcionará en los navegadores más modernos que soporten el objeto canvas de forma nativa:
  
  
  • Internet Explorer 9+
  • Firefox 31+
  • Chrome 31+
  • Safari 5.1+
  • Opera 24+
  • iOS Safari 7.1+
  • Opera Mini 7+
  • Android Browser 2.3+
  • Chrome for Android 37+
  
  Toda la información en http://caniuse.com/#feat=canvas
  
  
• Generándolo a partir de capas o divs: crea el código dibujando cada punto a partir de un elemento div de HTML, por lo que funcionará en cualquier navegador.

Podemos ver una demostración que ilustra estos dos métodos en la dirección https://larsjung.de/jquery-qrcode/latest/demo/

Su uso es simple: seleccionamos con jQuery el elemento en el que queremos albergar el código y llamamos al método qrcode con el parámetro text y la información que queremos mostrar.
$(selector).qrcode({'text':'http://www.finanser.es'});
Obtenemos el código QR:

También podemos pasar parámetros al método para definir el aspecto del código QR: tamaño, color, fuente, bordes, etc.
$(selector).qrcode({ 'render': 'canvas', 'size': 250, 'fill': '#1D82AF', 'radius': 0.5, 'background': '#ffffff', 'text': 'http://www.finanser.es' });
Código QR resultante:

jQuery también nos proporciona otro plugin para generar barcodes o códigos de barras lineales, cuya concepción se basa en en la 'representación mediante un conjunto de líneas paralelas verticales de distinto grosor y espaciado que en su conjunto contienen una determinada información, es decir, las barras y espacios del código representan pequeñas cadenas de caracteres'.
Fuente: http://es.wikipedia.org/wiki/Código_de_barras

También resulta extraordinariamente fácil su uso, tan sólo tenemos que importar en nuestro web site la librería jquery-barcode.min.js que podemos bajarnos del sitio oficial http://barcode-coder.com/download/jquery-barcode-2.0.3.zip.

En este caso seleccionamos el elemento en el que queremos insertar el código y llamamos al método barcode con la cadena numérica a codificar y el tipo de codificación.
$(selector).barcode('1234567890128', 'codabar');

De la misma forma que los códigos de dos dimensiones, podremos definir el aspecto del barcode: color de fondo, color de las barras verticales, ancho y algo de las barras, etc.

$(selector).barcode('1234567890128', 'codabar', { 'barWidth': 2, 'barHeight': 90, 'color': '#1D82AF', 'bgColor': '#ffffff', 'fontSize': 30 } );
Obtenemos el siguiente código de barras lineal:

Los tipos de códigos de barras que nos proporciona la librería son:

• EAN 8
• EAN 13
• UPC
• standard 2 of 5 (industrial)
• interleaved 2 of 5
• code 11
• code 39
• code 93
• code 128
• codabar
• MSI
• Data Matrix

Toda la información en http://barcode-coder.com/en/barcode-jquery-plugin-201.html

Jose Maria Acuña Morgado - Desarrollador Web

Leer más