Revista Comunicación

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

Publicado el 11 octubre 2014 por José María Acuña Morgado @jmacuna73
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 http://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

Volver a la Portada de Logo Paperblog