Cómo crear un código QR paso a paso
(nayuki.io)Proceso paso a paso para generar un código QR
Esta aplicación de demostración en JavaScript visualiza en detalle el proceso mediante el cual una cadena de texto se codifica como un símbolo de código de barras QR. El contenido de esta página explica y justifica cómo funciona internamente una biblioteca generadora de códigos QR.
Entrada del usuario
- Cadena de texto: "Hello world"
- Nivel de corrección de errores: bajo, medio, cuartil, alto
- Forzar versión mínima: entre 1 y 40
- Forzar patrón de máscara: automático (-1) o manual (0 a 7)
Salida del código QR
Proceso paso a paso
0. Análisis de caracteres Unicode
- Número de puntos de código de la cadena de texto de entrada: 17
- Detalles de cada carácter:
- Índice, carácter, punto de código Unicode, si puede codificarse en modo numérico, modo alfanumérico, modo byte y modo kanji
1. Creación de segmentos de datos
- Convertir cada carácter en bits
- En modo byte, los caracteres generan 8, 16, 24 o 32 bits
- Segmento único generado:
- Modo: byte
- Cantidad: 17 bytes
- Datos: longitud de 136 bits
2. Ajuste al número de versión
- Longitud total en bits necesaria para representar la lista de segmentos
- Capacidad de codewords de datos del código QR según la versión y el nivel de corrección de errores
3. Unir segmentos, agregar padding y generar codewords
- Combinar varias cadenas de bits
- Modo del segmento, cantidad de caracteres, datos, terminador, padding de bits, padding de bytes
4. División en bloques, agregar ECC e intercalar
- Estadísticas de todos los bloques
- Dividir los codewords de datos en bloques cortos y largos, luego calcular y agregar los codewords ECC
5. Dibujar patrones fijos
- Dibujar patrones de sincronización horizontales y verticales
- Dibujar patrones de búsqueda en las tres esquinas
- Dibujar la cuadrícula de patrones de alineación
- Dibujar bits temporales de formato
- Dibujar bloques de información de versión
6. Dibujar codewords y remanentes
- Calcular un recorrido en zigzag para visitar todos los módulos aún no llenados
- Dibujar módulos de datos/ECC según el orden del recorrido en zigzag y el valor de los bits de los codewords
7. Probar la aplicación de cada máscara
- Aplicar patrón de máscara
- Aplicar XOR de la máscara a los módulos de datos, ECC y remanentes
- Dibujar los bits reales de formato
8. Buscar patrones de penalización
- Secuencias horizontales y verticales de módulos del mismo color
- Bloques de módulos 2×2 del mismo color
- Patrones de búsqueda horizontales y verticales
- Equilibrio entre módulos oscuros y claros
9. Calcular puntos de penalización y elegir la mejor máscara
- Cómo se calculan los puntos de penalización
- Menor puntaje total de penalización: patrón de máscara 3
Información adicional
- Se proporcionan enlaces a Wikipedia y otros materiales sobre el diseño de códigos QR
Se puede consultar el código fuente en TypeScript y el código JavaScript compilado de esta aplicación web.
1 comentarios
Comentarios de Hacker News
Es una pena que en las explicaciones en línea sobre códigos QR a menudo se omita el cálculo de los códigos de corrección de errores Reed-Solomon
Hay un video de Veritasium sobre códigos QR titulado "I used to hate QR codes. But they're actually genius"
Es divertida la retroalimentación que recibe el autor
Me gustaría ver también una explicación similar sobre un decodificador de códigos QR
Una vez implementé un código QR en Rust
Etiquetar el año en el título del artículo es una buena práctica (en este caso, 2018)
Aprender cómo funcionan los códigos QR había estado en mi lista de pendientes durante mucho tiempo, y fue una buena introducción
Quería crear un código QR rápidamente, pero me costó por los sitios llenos de anuncios y los que obligan a "registrarte para usarlo"
Se podrían agregar más opciones, pero creo que la mayoría de los usuarios no las necesitarán
Ahora que ya sé cómo funcionan los códigos QR, también puedo usarlos en consultas SQL