Gerador de QR Code
Gerador de QR Code para link, texto, Wi-Fi, WhatsApp, e-mail e telefone. Tudo roda no navegador: o que a pessoa digita, inclusive a senha do Wi-Fi, não é enviado para nenhum servidor.
🔗 No ar: https://gerador-de-qr-code-one.vercel.app
Funcionalidades
- Seis tipos de conteúdo, cada um com o formato que os celulares entendem:
- Wi-Fi: quem escaneia entra na rede sem digitar a senha (
WIFI:T:WPA;S:…;P:…;;)
- WhatsApp: abre a conversa com uma mensagem já escrita (
wa.me)
- E-mail e telefone:
mailto: com assunto e corpo, tel: com DDI
- Link e texto livre
- Pré-visualização ao vivo enquanto a pessoa digita, com validação e mensagens claras.
- Cores personalizadas com alerta de leitura. A ferramenta calcula o contraste (fórmula da WCAG) e avisa quando as cores podem falhar na câmera, inclusive no caso de QR claro sobre fundo escuro.
- Resistência a danos (níveis L, M, Q e H de correção de erro).
- Cartão pronto para imprimir, com legenda opcional, em PNG de alta resolução, SVG vetorial ou copiado direto para a área de transferência.
Decisões técnicas
| Tema | O que foi feito |
|---|
| Privacidade | A versão anterior mandava o texto para uma API externa. Agora a codificação acontece localmente com a uqr (MIT, sem dependências), incluída em src/vendor/. |
| Arquitetura | src/payloads.js monta e valida o conteúdo de cada tipo; src/render.js desenha o SVG e calcula o contraste. As duas são funções puras, sem DOM. src/main.js cuida só da interface. |
| Correção dos formatos | Escape dos caracteres especiais do Wi-Fi (\ ; , : "), normalização de telefone brasileiro (adiciona o 55 só quando o DDI não foi informado), %20 em vez de + no mailto: e bloqueio de protocolos como javascript: no tipo link. |
| SVG enxuto | Módulos vizinhos na mesma linha viram um único retângulo dentro de um só <path>, o que deixa o arquivo bem menor do que um <rect> por quadradinho. |
| Testes | 14 testes com node --test, rodando no GitHub Actions. Durante o desenvolvimento, cada tipo também foi conferido decodificando a imagem gerada com um leitor independente (OpenCV). |
| Acessibilidade | Tipos como botões de rádio nativos, campos com label, erros em role="alert", avisos em aria-live. O rótulo do QR não expõe o conteúdo, para a senha do Wi-Fi não ser lida em voz alta. |
Estrutura
├── index.html
├── src/
│ ├── payloads.js # conteúdo de cada tipo + validação
│ ├── render.js # SVG e contraste
│ ├── main.js # interface e exportação
│ └── vendor/uqr.mjs # codificador de QR (MIT)
├── tests/ # node --test
├── assets/ # CSS e fontes
└── .github/workflows/test.yml
Rodando localmente
git clone https://github.com/wagnerglongo/gerador-de-QRCode.git
cd gerador-de-QRCode
npm run dev # http://localhost:3000
npm test # Node 20+
Desenvolvido por Wagner Longo.
