Crea tu Propio Generador de Código QR

formulario con estilo

Si deseas saber como se crea tu propio generador de código QR, sigue leyendo este articulo para conocer como hacerlo. En este articulo, vamos a presentar una forma simple y básica de como se crea tu propio generador de código QR, para tu propio consumo.

Comenzando con el HTML para el generador

La primera parte para este tutorial, es la creación del código HTML que se presentara en la pagina. La forma mas simple de este HTML es la creación de una casilla para agregar texto y un botón para generar el código. la otra parte del HTML es el contenedor donde se presentara el Código QR.

<section class="heading">
    <h1>QRCodes Generator</h1>
    <h2>Genera un QRCode para lo que desees</h2>
  </section>
  <section class="userinput">
      <label>Escribe Algo: 
        <input type="text" name="intext" id="intext">
      </label><br>
      <button type="submit" id="btngenera">Genera QR Code</button>
  </section>
  <section>
    <div class="qrcode-final" style="display: none;"></div>
  </section>
codigo html sin estilo sobre codigo qr

Con el código anterior tenemos; la sección “userinput” donde interactuamos para generar el código QR, y la sección “qrcode-final” donde renderizaremos el resultado con el código QR ademas de la opción para descargar la imagen.

Dándole estilo al generador de Código QR

Lo próximo es mejorar la visualización del contenido. Para esto aquí les dejo el estilo que he utilizado, pero pueden sentirse libres de elaborar su propio estilo muy particular.

<style>
    section{text-align: center;}
    .heading h2{font-size: 18px;}
    .userinput{border: 1px solid grey;padding: 15px;margin: 5px; text-align: center;}
    #intext{width: 100%; border: 1px solid lightslategray;border-radius: 25px;padding: 5px;}
    #btngenera, #dscr{margin: 10px auto;padding: 5px 10px;cursor: pointer;}
    .qrcode-final img{margin: 15px auto;}
  </style>
presentacion de codigo ya con estilo sobre codigo qr

Generar el Código QR con JavaScript

En esta parte vamos ya a elaborar el código que va a generar el código qr. Lo primero va a ser llamar la librería que nos ayudara a crear el código qr.

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

Ahora que ya tenemos la librería, vamos a generar el código.

Lo primero es declarar las variables, solo las que vamos a utilizar de forma global:

let btnsubmit = document.getElementById("btngenera"), 
        qrfinal = document.querySelector(".qrcode-final"),
        qr_canvas = document.querySelector("canvas"),
        user_input = document.getElementById("intext");

Luego vamos a crear la función que se le asignara al botón de generar el código qr.

btnsubmit.onclick = function(){
      /* primero chequearemos si la variable no esta vacía para generar o sobre escribir el código qr generado. */
      if(user_input.value != ""){
        if(qrfinal.childElementCount == 0){
          genera(user_input);  /* función que genera el código */
        } else { /*si ya esta generado, limpiar y volver a generar código */
          qrfinal.innerHTML = "";          
          genera(user_input);
        }
      } else{
        qrfinal.style = "display none";
      }
    }

Aquí esta la función “genera” la cual contiene lo necesario para crear el código QR, ademas del botón para descargar la imagen generada.

//genera
    function genera(user_input){
      qrfinal.style = "";

      var qrcode = new QRCode(qrfinal, {
        text: `${user_input.value}`,
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });

      let descargar = document.createElement("button");
      descargar.setAttribute("id", "dscr");
      qrfinal.appendChild(descargar);

      let qr_a = document.createElement("a");
      qr_a.setAttribute("download", "qrcode_link.png");
      qr_a.innerText = "Descargar";
      descargar.appendChild(qr_a);
      
      let qr_ima = document.querySelector(".qrcode-final img");
      if(qr_ima.getAttribute("src") == null){
          setTimeout(() => {
            qr_a.setAttribute("href", `${qr_canvas.toDataURL()}`);
          }, 300);
        } else{
          setTimeout(() => {
            qr_a.setAttribute("href", `${qr_ima.getAttribute("src")}`);
        }, 300);
      }
    }
codigo qr generado con el texto Hola

Y con esto ya tenemos lo necesario para crear un simple generador de códigos QR que puedes utilizar. Espero les guste, y hasta la próxima.