¿Cómo generar un código QR con javascript?

Desarrollo web

¿Necesitas aprender cómo generar un código QR? En esta entrada te muestro una forma de hacerlo mediante javascript, el ejemplo que trabajaremos es muy sencillo y en menos de lo que imaginas estarás generando tus propios códigos QR.

En una entrada anterior te había mostrado como generar un código de barras con php, hoy nos enfocamos en aprender como generar un código QR con javascript.

Para el desarrollo de este ejemplo requerimos de la librería qrcode.js para la creación de imágenes de códigos QR, no olvides descargarla e incluirla dentro de tu proyecto.

Estructura html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Generar Código QR</title>
  <link rel='stylesheet' href='style.css' type='text/css'>
</head>
<body>
  <input id="item_txt" type="text" placeholder="Ingresa algún texto">
  <button id="generarCodigo">Generar</button> <a href="#" id="descargarCodigo">Descargar</a>
  <div id="codigoQR"></div>	
</body>
<script src="jquery.min.js"></script>
<script src="qrcode.js"></script>
<script src="main.js"></script>
</html>

Dentro de tu archivo html debes crear un elemento tipo input y le asignas un id, para este ejemplo le he nombrado item_txt, en este input es donde se ingresará el texto que deseas convertir a código QR.

Enseguida debes crear un elemento tipo button que se ocupará para realizar la acción de generar el código QR, de igual forma se incluye un elemento tipo a para la funcionalidad de  descargar la imagen, a ambos elementos debes asignarles su propio id ya que los usaremos más adelante.

El último componente que creas es un elemento div, para este ejemplo le he asignado el id codigoQR, en este contenedor es donde se visualizará la imagen del código QR generado.

Finalmente hacemos referencia a las librerías jquery y qrcode, también puedes observar que hago referencia a un archivo main.js que se creará más adelante para la funcionalidad.

Poniendo algo de estilo a los elementos

Si quieres darle un poco de estilo a los elementos que declaraste en html este es el estilo que he usado.

#item_txt{
  width: 20%;
}

#generarCodigo{
  width: 10%;
  background-color: #5AA1E3;
  color: #fff;
}

#descargarCodigo{
  width: 10%;
  background-color: #3CB371;
  color: #fff;
  display: none;
  text-align: center;
  border: #eee solid 2px;
  text-decoration: none;
}

#codigoQR{
  width: 256px;
  height: 256px;
  margin-top: 25px;
  border: 2px solid #eee;
}

Funcionalidad en javascript

Dentro de tu archivo js lo primero que debes hacer es crear un objeto de la clase QRCode que es propia de la librería qrcode y envías como parámetro el id del contenedor que declaraste en html.

A continuación detectamos cuando haya un clic sobre el botón que generará el código y guardamos en la variable cadena el valor que se haya ingresado a la caja de texto con id item_txt.

Si el texto es distinto de comillas por medio del objeto que declaramos llamamos a la función makeCode y le enviamos la variable cadena que incluye el texto del cual queremos obtener el código QR, de esta manera estaríamos obteniendo la imagen del código QR.

Finalmente en el último bloque del evento clic del botón de descargar imagen guardamos el código base64 de la imagen que se generó e incluimos algunos atributos que nos permitirán descargar la imagen que se ha generado.

var miCodigoQR = new QRCode("codigoQR");

$(document).ready(function(){
  $("#generarCodigo").on("click",function(){
    var cadena = $("#item_txt").val();
    if (cadena == "") {
        alert("Ingresa un texto");
        $("#item_txt").focus();
    }else{
      $("#descargarCodigo").css("display","inline-block");
      miCodigoQR.makeCode(cadena);
    }
  });

  $("#descargarCodigo").on("click",function(){
    var base64 = $("#codigoQR img").attr('src');
    $("#descargarCodigo").attr('href', base64);
    $("#descargarCodigo").attr('download', "codigoQR");
    $("#descargarCodigo").trigger("click");
  });
});

Puedes visualizar el resultado en este enlace.

De esta manera concluimos este pequeño ejemplo en el que aprendimos cómo generar un código QR, no olvides compartir esta entrada en tu red social favorita.

¿Cómo generar un código QR con javascript?
5 (100%) 5 votos

Comentarios

Leave a Comment

Sígueme en redes sociales
  • como hacer un blog personal desde cero - denisse estrada
    Suscríbete al blog