En este tutorial, aprenderás cómo crear un generador de códigos QR utilizando HTML y JavaScript. Los códigos QR son una excelente forma de compartir enlaces, información o cualquier tipo de texto. Este proyecto es perfecto para principiantes que desean aprender a integrar funciones de JavaScript en sus proyectos web.
En el año 2019, publicamos un artículo sobre cómo generar códigos QR utilizando PHP y HTML en combinación con la librería Endroid: Generar códigos QR con PHP y HTML. Sin embargo, con las versiones más recientes de PHP, algunos usuarios han encontrado problemas de compatibilidad con esta librería. Por ello, decidimos actualizar el contenido y crear un nuevo tutorial, esta vez utilizando JavaScript y la librería qrcodejs. Esta alternativa basada en JavaScript simplifica la implementación y asegura compatibilidad con cualquier versión de PHP, además de facilitar la generación de códigos QR directamente en el navegador del usuario.
Paso 1: Estructura HTML
Para comenzar, necesitamos crear una estructura básica en HTML que incluya un campo de texto donde el usuario pueda escribir el contenido que se convertirá en código QR. Aquí tienes el código HTML necesario:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Generador de Códigos QR</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script> </head> <body class="container mt-5"> <h1>Generador de Códigos QR</h1> <form id="qr-form"> <div class="form-group"> <label for="text">Texto o URL:</label> <input type="text" id="text" class="form-control" required> </div> <button type="submit" class="btn btn-primary">Generar Código QR</button> </form> <div class="mt-4"> <h2>Código QR generado:</h2> <div id="qrcode"></div> </div> </body> </html> |
Paso 2: Agregar el Script de Generación de QR
Usaremos una librería JavaScript llamada qrcodejs que facilita la creación de códigos QR. Incluye el siguiente script en la parte inferior de la página, justo antes de cerrar la etiqueta </body>:
|
1 |
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script> |
Este script permite que la función QRCode genere el código QR en un contenedor HTML específico.
Paso 3: Lógica en JavaScript
A continuación, agregaremos un script JavaScript para manejar el evento de envío del formulario. Este código obtendrá el valor del campo de texto, generará el código QR y lo mostrará en la página:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> document.getElementById('qr-form').addEventListener('submit', function(event) { event.preventDefault(); const text = document.getElementById('text').value; if (text) { document.getElementById('qrcode').innerHTML = ''; // Limpia cualquier QR previo const qrcode = new QRCode(document.getElementById("qrcode"), { text: text, width: 128, height: 128, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); } }); </script> |
Paso 4: Probando el Generador
Guarda el código completo en un archivo HTML y ábrelo en tu navegador. Ingresa un texto o una URL en el campo de entrada y haz clic en “Generar Código QR”. Deberías ver el código QR generado justo debajo.
Este generador de códigos QR es una herramienta útil que puedes personalizar fácilmente para adaptarlo a tus necesidades. Ahora puedes integrarlo en cualquier proyecto web y permitir a tus usuarios generar sus propios códigos QR.
Código Completo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Generador de Códigos QR</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script> </head> <body class="container mt-5"> <h1>Generador de Códigos QR</h1> <form id="qr-form"> <div class="form-group"> <label for="text">Texto o URL:</label> <input type="text" id="text" class="form-control" required> </div> <button type="submit" class="btn btn-primary">Generar Código QR</button> </form> <div class="mt-4"> <h2>Código QR generado:</h2> <div id="qrcode"></div> </div> <script> document.getElementById('qr-form').addEventListener('submit', function(event) { event.preventDefault(); const text = document.getElementById('text').value; if (text) { document.getElementById('qrcode').innerHTML = ''; const qrcode = new QRCode(document.getElementById("qrcode"), { text: text, width: 128, height: 128, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); } }); </script> </body> </html> |
Con este tutorial, puedes implementar de manera sencilla un generador de códigos QR directamente en cualquier proyecto web, sin necesidad de configuraciones complejas ni dependencias de backend. Utilizando JavaScript y la librería qrcodejs, este generador permite a los usuarios transformar rápidamente cualquier texto o URL en un código QR visualizable en pantalla.
Gracias a la naturaleza ligera de JavaScript, este generador funciona directamente en el navegador, lo cual agiliza la implementación y elimina la necesidad de un servidor o de procesamientos adicionales en PHP u otro lenguaje backend. Esto significa que puedes integrar esta funcionalidad en prácticamente cualquier página web, mejorando la interactividad y la experiencia del usuario al facilitar el acceso a información rápida y eficaz mediante códigos QR.
