Generar un código QR usando JavaScript
En esta publicación te voy a explicar, de forma muy simple, cono generar un código QR usando JavaScript a través de una API pública.
Los códigos de barras 2D (un grupo de códigos de barras al que pertenece el código QR) son comparables a los códigos de barras unidimensionales comunes. Sin embargo, los códigos QR pueden almacenar muchos más datos, más de 3000 caracteres, en un espacio muy pequeño.
La alta densidad de datos almacenables, en comparación con los códigos de barras tradicionales, por un lado. Y la amplia disponibilidad de software existente para su lectura, por el otro, han ayudado al código QR a establecerse y sacar del mercado a los códigos 2D tradicionales.
El caso de uso más destacado de los códigos QR es el área de marketing móvil. Debido a que existe una gran cantidad de software gratuito para leer códigos QR, disponible para todos los teléfonos móviles. Y es tan simple como apuntar a la imagen con la cámara de fotos.
Los códigos QR se utilizan como enlace entre los medios fuera de línea, como el papel y los sitios web.
Ejemplo para generar un código QR
Aquí te dejo el ejemplo completo. Puedes hacer la prueba y ejecutarlo directamente haciendo click sobre el botón «Run Pen».
Todo lo que ves en el ejemplo es posible gracias a la API que nos brinda la gente de QR Code Generator.
Un servicio online que permite crear un código QR simple de forma gratuita desde su sitio web. Aunque también ofrecen servicios pagos para personalizar o profesionalizar los QR usando imágenes o logos dentro del mismo.
Por suerte, ofrecen el mismo servicio, gratuito y abierto para cualquiera, a través de una API. De esta forma, con una sencilla llamada, podemos generar el codigo QR usando JavaScript para apuntar a una direccion web o para almacenar cualquier texto que necesitemos.
Como funciona la llamada paso a paso
En la misma web de los creadores se puede encontrar la documentación completa y muy bien explicada sobre el funcionamiento de la API. Recomiendo leerla detenidamente.
En el código fuente, podes ver que la llamada a la API la hacemos mediante JavaScript con la única finalidad de generar la imagen de forma dinámica, dentro del elemento <img>, para no tener que recargar la pagina.
Armamos la ruta completa dentro de las variables api y api2. Y luego, en el evento del boton, cargamos la respuesta de esa llamada, que será el codigo QR, dentro del elemento image
api = `https://api.qrserver.com/v1/`,
api2 = `create-qr-code/?size=150x150&color=FF0000&data=`;
button.addEventListener("click", () => {
image.src = `${api}${api2}${input.value}`;
});
Según explican en la documentación de la API, la llamada debe tener esta forma:
http(s)://api.qrserver.com/v1/create-qr-code/?data=[URL-encoded-text]&size=[pixels]x[pixels]
Donde le pasamos la url o el texto que queremos guardar dentro del QR en la variable data y el tamaño que tendrá la imagen dentro de la variable size
Personalizar la imagen resultante
También es posible, pasar otros datos opcionales para personalizar un poco mas el resultado, como por ejemplo el color del QR, el color de fondo o el tamaño de la imagen resultante.
Simplemente hay que usar parámetros extra agregando pares del tipo &[nombre-del-parámetro]=[valor-del-parámetro] a la llamada.
Si te fijas en detalle, yo agregué una pareja de parámetros con los valores «color=FF0000» para indicar que el color de la imagen QR debe ser rojo.
Los códigos de color se pueden enviar en formato Decimal (255-0-0), hexadecimal de 3 caracteres f00 o en hexadecimal completo de 6 caracteres FF0000.
En la documentación se encuentran todas las opciones muy bien detalladas.
Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.
Y si quieres ganar algo de dinero sin esfuerzo, registrate en IPRoyal desde este banner y recibí 1 dolar de regalo al comenzar a usar la aplicación para generar ingresos pasivos.
Acá puedes conocer más sobre ingresos pasivos, que es y como funciona IPRoyal Pawns.