11 de octubre de 2014

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.

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.

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.




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.


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


14 comments:

  1. Son buenos tus comentarios, pero que pasa si lo que quiero es imprimir el QR, al parecer no tiene opcion para hacerlo, o conoces alguna manera de mandarlo a un archivo, por ejemplo un png.

    Saludos GRC

    ResponderEliminar
  2. Buenos días GRC.

    Los códigos QR bidimensionales generados a través de jQuery devuelven un objeto Canvas de html5. Si pulsas con el botón derecho del ratón sobre el código te aparecerá un menú contextual con la opción 'Guardar imagen como...', al menos en Mozilla Firefox y en Google Chrome.

    Como comenté en el post anterior (Quick Response Barcode o «código de respuesta rápida») existen otras alternativas para obtener la imagen correspondiente al QR code. Señalo sólo tres pero hay muchas más:

    http://www.qrplanet.com/es/generador-qr-code/
    http://www.codigo-qr.es/
    http://www.barcode-generator.org/

    Cuando dependemos de servicios de terceros, corremos el riesgo de que detengan su mantenimiento o que el servidor esté caído e incluso de que la página desaparezca.

    Considero que la mejor opción para la integración en un blog o sitio web es bajarnos las librerías javascript (jQuery es muy fácil de usar) a nuestro proyecto para tener el control completo y usarlas de forma segura.

    Un saludo!!

    ResponderEliminar
  3. Como podría generar un barco de pero no horizontal sino vertical????

    ResponderEliminar
  4. Como podría generar un barco de pero no horizontal sino vertical????

    ResponderEliminar
  5. No entiendo tu pregunta Sergio,
    ¿podrías ser más explícito?

    Gracias.

    ResponderEliminar
  6. Hola Booking,
    este artículo explica como generar códigos QR a partir de una librería javascript.

    Lo que planteas va más allá del propósito de este post, siento no poder ayudarte.
    Gracias por visitar el blog.

    Saludos.

    ResponderEliminar
  7. Sabes de alguna forma en el que una vez generado el codigo de barras o qr pueda colocarlo en otro lienzo canvas en una posicion x,y determinada?

    ResponderEliminar
  8. Hola, creo que te refieres a cambiar la posición respecto de las coordenadas x/y
    En ese caso, lo mejor es optar por las hojas de estilo o css que te permiten rotar imágenes (un código qr es una imagen).

    Ejemplo: https://codepen.io/lindell/pen/EyvEVQ

    ResponderEliminar
  9. no, el tema es que el codigo de barras lo tengo que insertar junto con otros elementos en un canvas, digamoslo asi, contenedor.


    dibujo1, x, y;
    dibujo2, x2, y2;
    codigo de barras, x3, y3;
    dibujo3, x4, y4;
    .
    .
    .
    .



    donde las coordenadas x3,y3 son dinamicas

    ResponderEliminar
  10. no se ve pero en mi anterior comentario hay definido un canvas contendor justo antes de dibujo 1 y se cierra despues de los puntos suspensivos.

    ResponderEliminar
  11. Entendido!
    Nunca he trabajado con estos dos elementos juntos (barcode y canvas) pero tal vez este ejemplo te pueda ayudar:

    https://stackoverflow.com/questions/25759426/how-to-implement-barcode-in-canvas

    ResponderEliminar
  12. bien, lo que me esperaba, tengo que covertir el codigo de barras en una imagen y luego añadir la imagen al canvas.

    muchas gracias

    ResponderEliminar
  13. hola como podria generar un codigo que contenga al menos 3 cosas distintas ejemplo: Marca, Modelo, Serie.

    ResponderEliminar