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

cómo generar un código QR

¿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");
  });
});

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.

17 thoughts on “¿Cómo generar un código QR con javascript?

  1. Buen ejemplo pero existe algun error que no permite descargar la imagen,

    Uncaught RangeError: Maximum call stack size exceeded
    at RegExp.exec ()
    at new init (jquery.min.js:2)
    at v (jquery.min.js:2)
    at HTMLAnchorElement. (main.js:16)
    at HTMLAnchorElement.dispatch (jquery.min.js:2)
    at HTMLAnchorElement.u (jquery.min.js:2)
    at Object.trigger (jquery.min.js:2)
    at HTMLAnchorElement. (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at init.each (jquery.min.js:2)

    existe ese error a una llamada infinita pero a ti se genera la descarga, en mi navegador no

    ayuda, estoy tratando de resolver pero no funciona aun

  2. Hola, buen dia, compie el codigo tal cual lo mostrabas en mi IDE pero no salio como el enlace que dejas :c
    a que se deberia ? Excellente trabajo en verdad, un saludo 😀

  3. Buenas funciona perfectamente!
    Tengo una duda, en este caso solo hay un campo input. ¿Como seria el caso con diferentes campos input? de forma independientes.
    Un ejemplo seria para un campo nombre, apellido y edad.
    Muchas gracias

  4. muy buen ejemplo me ha servido demasiado, solo tengo una duda espero explicarme bien, se puede poner una imagen en el codigo QR, no dentro… sino que sea parte de la imagen que se genero,

    saludos

  5. Buenas, excelente herramienta, mi duda es si podría vincular el QR a varios imput, ejemplo cuadtro impus: Nombre – Direccion – Telefono – foto (imagen), se puede???

  6. Denisse Estrada trato de descargar la codigo QR generado pero solo me descargar un archivo HTML de mi sitio mas no el codigo,

    note que que en la consola del navegador el href=”#” queda vacio pero en la consola de tu codigo muestra Descargar Esta si el codigo QR pero a mi no me agarra la URL del codigo Generado, espero tu pronta ayuda!!!

  7. En la consola de tu codigo el href= si muestra la url generada al descargar el codigo QR, muestra la dirección mas en mi navegador en mi consola muestra el href=’#’ vacío !!!

  8. Disculpa y si lo que quiero es leer el código QR igual con javascriipt, hay alguna librería que me permita hacerlo.
    Mi intención es que desde la camara de mi computadora lo pueda hacer.

    De antemano gracias
    Espero que me puedas ayudar.

  9. hola buenas noches, estoy buscando esto. y me parece genial. pero no logro funcione, la razon es que no he conectado el archivo js en mi archivo index de html. normalmente en head yo pongo el scrypt src=”nombre_archivo.js” y en tu codigo tienes tres Scrypt src. no soy experto. pero entiendo bastante. podria alguien ayudarme?

  10. Use le codigo publicado en el post, agregue las librerias y todo el asunto, si me descarga el QR la imagen, al querer escanear la imagen descargada en teoria debe de tener la url , pero al parecer no la contiene porque no me permite escanear la imagen y por lo consiguiente no me redirreciona a ningun lugar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *