5 pontos por GN⁺ 2024-11-19 | 1 comentários | Compartilhar no WhatsApp

Processo passo a passo de geração de código QR

Este aplicativo de demonstração em JavaScript visualiza em detalhe o processo pelo qual uma string de texto é codificada em um símbolo de código de barras QR. O conteúdo desta página explica e justifica como uma biblioteca geradora de código QR funciona internamente.

Entrada do usuário

  • String de texto: "Hello world"
  • Nível de correção de erro: baixo, médio, quartil, alto
  • Forçar versão mínima: entre 1 e 40
  • Forçar padrão de máscara: automático (-1) ou manual (0 a 7)

Saída do código QR

Processo passo a passo

0. Análise de caracteres Unicode

  • Número de pontos de código da string de texto de entrada: 17
  • Detalhes de cada caractere:
    • Índice, caractere, ponto de código Unicode, se pode ser codificado nos modos numérico, alfanumérico, byte e kanji

1. Criação dos segmentos de dados

  • Converter cada caractere em bits
  • No modo byte, os caracteres geram 8, 16, 24 ou 32 bits
  • Segmento único gerado:
    • Modo: byte
    • Quantidade: 17 bytes
    • Dados: comprimento de 136 bits

2. Ajuste ao número da versão

  • Comprimento total em bits necessário para representar a lista de segmentos
  • Capacidade de codewords de dados do código QR de acordo com a versão e o nível de correção de erro

3. Concatenação dos segmentos, adição de padding e geração de codewords

  • Combinar várias strings de bits
  • Modo do segmento, quantidade de caracteres, dados, terminador, padding de bits, padding de bytes

4. Divisão em blocos, adição de ECC e entrelaçamento

  • Estatísticas de todos os blocos
  • Dividir os codewords de dados em blocos curtos e longos, depois calcular e adicionar os codewords de ECC

5. Desenho dos padrões fixos

  • Desenhar os padrões de temporização horizontal e vertical
  • Desenhar os padrões localizadores nos três cantos
  • Desenhar a grade de padrões de alinhamento
  • Desenhar os bits temporários de formato
  • Desenhar os blocos de informação da versão

6. Desenho dos codewords e do restante

  • Calcular a varredura em zigue-zague para visitar todos os módulos ainda não preenchidos
  • Desenhar os módulos de dados/ECC de acordo com a ordem da varredura em zigue-zague e os valores de bits dos codewords

7. Teste da aplicação de cada máscara

  • Aplicar o padrão de máscara
  • Aplicar XOR da máscara aos módulos de dados, ECC e restantes
  • Desenhar os bits reais de formato

8. Busca de padrões de penalidade

  • Sequências horizontais e verticais de módulos da mesma cor
  • Blocos 2×2 de módulos da mesma cor
  • Padrões localizadores horizontais e verticais
  • Equilíbrio entre módulos escuros e claros

9. Cálculo dos pontos de penalidade e seleção da melhor máscara

  • Como os pontos de penalidade são calculados
  • Menor total de pontos de penalidade: padrão de máscara 3

Informações adicionais

  • Links para a Wikipedia e outros materiais sobre o design de códigos QR

O código-fonte em TypeScript e o código JavaScript compilado deste aplicativo web estão disponíveis para consulta.

1 comentários

 
GN⁺ 2024-11-19
Comentários do Hacker News
  • É uma pena que explicações online sobre QR codes frequentemente deixem de fora o cálculo dos códigos de erro Reed-Solomon

    • O autor explica isso como sendo "longo, tedioso e desinteressante"
    • Isso acaba dificultando encontrar informações relacionadas
  • Existe um vídeo do Veritasium sobre QR codes: "I used to hate QR codes. But they're actually genius"

  • O feedback que o autor recebe é interessante

  • Gostaria de ver uma explicação parecida sobre decodificadores de QR code

  • Já implementei QR code em Rust

  • Marcar o ano no título do artigo é uma boa prática (neste caso, 2018)

  • Aprender como os QR codes funcionam estava há muito tempo na minha lista de coisas a fazer, e este foi um bom material introdutório

  • Eu queria criar um QR code rapidamente, mas tive dificuldade por causa de sites cheios de anúncios e sites em que era preciso "se registrar para usar"

    • Encontrei alguns no GitHub, mas havia outros problemas, então implementei eu mesmo usando uma biblioteca bem projetada que já tinha usado antes
    • Levou cerca de 15 minutos
    • Link do gerador de QR code
  • Dá para adicionar mais opções, mas acho que a maioria dos usuários não vai precisar delas

  • Agora que sei como os QR codes funcionam, também posso usá-los em consultas SQL