Ir al contenido
Tutorial

Genere códigos QR con una API REST: un POST, SVG instantáneo

| 5 min read

Genere códigos QR desde cualquier URL o texto con una solicitud POST. Devuelve SVG en menos de 100 ms. Nivel gratuito, sin instalación de biblioteca, 6 parámetros configurables.

QR code displayed on a phone screen
Photo by Markus Winkler on Unsplash

El pago de su comercio electrónico debe mostrar un código QR para la URL de seguimiento de cada pedido. tu podrías instalar una biblioteca QR del lado del cliente, configurar un elemento de lienzo, manejar el ciclo de vida de renderizado, y agregue 30-40 KB a su paquete. O puede enviar una solicitud POST y obtener un SVG.

La botoi /v1/qr/generate El punto final convierte cualquier cadena o URL en un QR escaneable código. Devuelve SVG sin formato que puede incrustar en HTML, guardar en un archivo o transmitir a un PDF. Sin mpn paquete, sin dependencia del lienzo, sin paso de compilación.

La llamada API

Envíe una solicitud POST con el texto que desea codificar:

La respuesta es una imagen SVG sin formato (Tipo de contenido: image/svg+xml):

Ese SVG se muestra nítido en cualquier tamaño porque está basado en vectores. Déjalo caer en un <img> etiqueta, insertarla en su HTML o canalizarla a un archivo. Sin análisis JSON necesario; el cuerpo de la respuesta es el propio SVG.

Parámetros

El punto final acepta seis parámetros. Solo text se requiere:

  • texto (cadena, requerida): La URL o texto a codificar. Admite hasta ~4296 caracteres alfanuméricos.
  • tamaño (número, predeterminado 300): ancho y alto en píxeles. Rango: 50 a 2000.
  • color oscuro (Cadena hexadecimal, predeterminada #000000): Color de primer plano de los módulos QR.
  • color claro (Cadena hexadecimal, predeterminada #ffffff): Color de fondo.
  • nivel de corrección de error (cadena, por defecto M): Uno de L (7%), M (15%), Q (25%) o H (30%). Los niveles más altos toleran más daño pero producen códigos más densos.
  • margen (número, predeterminado 4): Zona silenciosa alrededor del código QR en módulos. Rango: 0 a 20.

Aquí hay una solicitud que utiliza los seis parámetros:

Ejemplos prácticos

Código QR del menú del restaurante

Imprima un código QR en carpas de mesa para que los comensales puedan acceder al menú completo en su teléfono. error La corrección H se encarga de los desgastes y las manchas de café.

Código QR del boleto del evento

Codifique una identificación de boleto única en cada código QR. El personal lo escanea en la puerta con cualquier teléfono inteligente. cámara. La corrección de errores Q proporciona un buen equilibrio entre densidad y tolerancia al daño. para insignias impresas.

Código QR del enlace de pago

Genere un enlace de pago escaneable para facturas, recibos o exhibidores en puntos de venta. el el cliente lo escanea y llega a una página de pago de Stripe.

Generación por lotes en bucle

¿Necesita códigos QR para un catálogo de productos? Recorra una lista de URL y guarde cada SVG en el disco. Este script bash genera cuatro códigos QR en menos de un segundo:

Producción:

Ejemplo de Node.js: códigos QR para seguimiento de pedidos

Este servidor Express expone un /orders/:id/qr punto final. cuando tu pago página o plantilla de correo electrónico de confirmación recupera esta URL, obtiene un código QR SVG que apunta a la página de seguimiento del pedido.

Uso:

El punto final establece un encabezado de caché de 24 horas para que las solicitudes repetidas para el mismo pedido no lleguen la API nuevamente. En producción, agregue Redis o una CDN delante de esta ruta para aumentar el tráfico.

Bibliotecas QR del lado del cliente frente a API: cuándo usar cuál

Utilice la API cuando necesite generación del lado del servidor (correos electrónicos, archivos PDF, recibos), cuando desee mantenga su paquete de frontend pequeño o cuando genere códigos QR en un flujo de trabajo de backend como procesamiento de pedidos o emisión de billetes.

Utilice una biblioteca del lado del cliente cuando su aplicación necesite funcionar sin conexión, cuando la latencia es más importante que el tamaño del paquete (renderizaciones inferiores a 5 ms), o cuando estás creando una herramienta donde los usuarios generan Códigos QR de forma interactiva en el navegador y no desea depender de una solicitud de red para cada pulsación de tecla.

Puntos clave

El nivel gratuito de 5 solicitudes por minuto cubre desarrollo, creación de prototipos y bajo volumen. uso de producción. Para aplicaciones de generación por lotes o de alto tráfico, agregue su clave API en el Authorization: Bearer encabezamiento. Compruebe el Documentos API para obtener la referencia completa del punto final.

FAQ

¿Necesito una clave API para generar códigos QR?
No. El nivel gratuito permite el acceso anónimo a 5 solicitudes por minuto con limitación de velocidad basada en IP. Para aplicaciones de producción o generación por lotes, agregue una clave API en el encabezado Autorización para eliminar el límite de velocidad.
¿Puedo obtener una PNG en lugar de SVG?
Establezca el parámetro de formato en "base64" para recibir el código QR como un URI de datos que puede incrustar en una etiqueta img. La API devuelve resultados basados ​​en SVG en todos los casos porque SVG es independiente de la resolución y se reproduce nítido en cualquier tamaño. Convierta a PNG del lado del cliente con un elemento de lienzo si necesita un archivo ráster.
¿Cuál es la longitud máxima de datos para un código QR?
Los códigos QR admiten hasta aproximadamente 4296 caracteres alfanuméricos o 2953 bytes de datos binarios. La mayoría de las URL y cadenas cortas se encuentran dentro de estos límites. Si llega al techo, primero acorte su URL usando un acortador de enlaces.
¿Qué nivel de corrección de errores debo utilizar?
Utilice M (15 % de recuperación) para pantallas digitales y L (7 %) cuando la densidad del código sea importante. Elija Q (25%) o H (30%) para materiales impresos que puedan rayarse, doblarse o cubrirse parcialmente con una superposición de logotipo.
¿Puedo personalizar los colores del código QR?
Sí. Pase darkColor y lightColor como valores hexadecimales (por ejemplo, "#1a1a2e" y "#ffffff"). Asegúrese de que haya suficiente contraste entre los dos colores para que los escáneres lean el código de manera confiable.

Empieza a construir con botoi

150+ endpoints de API para consultas, procesamiento de texto, generacion de imagenes y utilidades para desarrolladores. Plan gratuito, sin tarjeta de credito.