Ferramentas · No ar
QR Studio
QR codes com a sua cara, que ainda assim se leem.
Crie QR codes com cores, formas e logo, confira contraste e leitura, monte cartões vCard e Wi-Fi e gere tudo também por API.
Sobre o projeto
O que é o QR Studio
O QR Studio faz QR Codes bonitos que continuam legíveis. Você escolhe o conteúdo (um link, um cartão de contato vCard ou uma rede Wi-Fi), muda a forma dos módulos, os olhos dos três cantos, as cores (cor única, degradê linear ou radial, fundo colorido ou transparente) e vê o resultado na hora. Há nove modelos prontos e um botão de sortear estilo que sempre respeita o contraste.
O que o diferencia é a conferência. O app mede o contraste entre módulos e fundo, avisa quando o QR está invertido ou sem fundo, e calcula, bloco a bloco, o maior tamanho de logo em que a correção de erros ainda garante a leitura. O botão Testar leitura decodifica o QR exatamente como será exportado, inclusive pequeno e borrado, e confere se o texto sai idêntico.
Tudo o que a tela faz também existe como API: GET /qr?data=…, GET /qr/<texto>.svg ou .png e POST /qr com JSON (para contato, senha de Wi-Fi, texto longo e logo). As opções são as mesmas, com os mesmos nomes, porque saem de um esquema único que gera os controles da tela, valida a API e escreve o OpenAPI. A imagem que a API devolve é a mesma que o app baixa. Há limites por IP com custo por pedido, chaves de API opcionais para quem gera em volume e uma trava contra tentativas de adivinhar chave.
O que você digita na tela nunca sai do seu navegador. O app só soma contadores anônimos de uso (quantas imagens foram geradas, nunca o conteúdo) e não envia nada se o seu navegador pede para não ser rastreado. Pela API o conteúdo precisa chegar ao servidor para virar imagem; ele não é guardado em banco nem em disco.
Recursos
O que o QR Studio faz
QR estilizado
Cinco formas de módulo, três anéis e quatro miolos nos olhos, cor própria nos olhos, degradê linear ou radial, fundo colorido ou transparente, margem e nível de correção. Nove modelos e um sorteio.
Logo com garantia de leitura
Coloque a sua marca no centro (PNG, JPEG, WebP, GIF ou SVG, convertida para PNG no navegador). O app calcula o maior tamanho em que o código ainda é garantido e avisa quando você passa dele.
Contraste conferido
Razão de contraste do WCAG entre módulos e fundo, pegando o pior ponto do degradê e dos olhos. Avisa de QR invertido e de fundo transparente, e corrige a cor com um clique.
Testar leitura
Decodifica o QR como ele será exportado, no tamanho normal, pequeno e borrado, e confere se o texto lido é igual ao original.
Cartão de contato (vCard)
Nome, empresa, cargo, telefones, e-mail, site, endereço e observação em vCard 3.0, com os escapes certos. Baixe também o arquivo .vcf.
Wi-Fi sem digitar senha
Rede, segurança (WPA, WEP ou sem senha) e rede oculta, com escape dos caracteres especiais. A senha fica só no seu navegador.
PNG nítido e SVG vetorial
O PNG usa um número inteiro de pixels por módulo, então as bordas ficam nítidas (256, 512, 1024 ou 2048). O SVG serve para imprimir em qualquer tamanho. Dá para copiar a imagem direto.
API com todas as opções
GET /qr, atalho /qr/<texto>.svg e .png e POST /qr com JSON. Opção inválida é erro 400 com a lista do que está errado, nunca um padrão em silêncio. A tela copia a chamada pronta em URL, curl, JavaScript, Python e img.
Limites contra abuso
Cota por IP com peso por pedido (SVG 1, PNG 6, mais o logo, o tamanho e o conteúdo grande), chaves de API opcionais, trava de força bruta de chave, no máximo dois PNG ao mesmo tempo, cache de imagens prontas e cabeçalhos RateLimit.
Números abertos
A página mostra quantos QR codes já foram gerados pela tela e pela API, quantos com logo, quantas leituras foram testadas e quantos pedidos foram barrados.
Tecnologias
Por dentro do QR Studio
Codificador de QR escrito do zero
Modos numérico, alfanumérico e bytes com segmentação mista, versões 1 a 40, níveis L, M, Q e H, Reed-Solomon, as oito máscaras com a penalidade da norma. Provado contra o jsQR em todas as versões e níveis cheios até o último byte, e contra um codificador independente.
Um esquema só de opções
Cada opção (nome, tipo, valores, padrão, limites, texto em português) aparece uma vez. Dele saem os controles da tela, a validação da API e o OpenAPI 3.1. Um teste confere que o conjunto de controles da tela é exatamente o do esquema.
A mesma imagem na tela e na API
O QR vira um plano de desenho (caminhos SVG). A tela o pinta no canvas e o SVG sai do mesmo plano, byte a byte igual ao da API. O PNG do servidor vem de um rasterizador próprio, com bordas suavizadas, sem biblioteca de imagem.
PNG sem dependência
Codificador e decodificador de PNG com zlib do Node. O decodificador do logo aceita só PNG de 8 bits e recusa arquivo corrompido, grande demais ou com bomba de descompressão.
Conta exata do logo
Cada palavra de dados do QR pertence a um bloco de Reed-Solomon. O app conta quantas palavras o logo apaga em cada bloco e compara com o que o bloco consegue refazer: se nenhum passar do limite, qualquer leitor que siga a norma lê.
Contraste WCAG
Luminância relativa e razão de contraste do WCAG 2. Acima de 4,5 é bom, de 3 a 4,5 é atenção, abaixo disso o QR pode não ler.
jsQR sob demanda
O leitor de teste (jsQR, licença Apache-2.0, com a correção de um erro na tabela da versão 23) só é baixado quando você pede o teste, e nada vai para a rede.
Janela deslizante com peso
O limite por IP desconta um peso por pedido: o SVG custa pouco, o PNG mais, e logo ou imagem grande mais ainda. Pedido inválido também custa 1. Duas janelas, de um minuto e de uma hora, só descontam juntas.
Chaves em tempo constante
Só o hash SHA-256 de cada chave fica na memória e a comparação percorre todas com timingSafeEqual. Chave errada conta como falha por IP, e cinco falhas travam novas tentativas com chave.
Fila de PNG e cache
O render do PNG é CPU pura, então no máximo dois rodam ao mesmo tempo, devolvendo o controle ao servidor entre os pedaços; o excesso espera pouco ou recebe 503. Imagens de texto ficam num cache LRU por alguns minutos.
Node, Express e Eta
A mesma base do resto do portfólio, sem etapa de build e sem framework de front: módulos ES puros que rodam igual no navegador e no Node.
API
Endpoints
Sem chave e sem cadastro, com limite por IP. Quem gera em volume pode ter uma chave (cabeçalho X-API-Key ou Authorization: Bearer, nunca na URL). Contato e senha de Wi-Fi: use o POST.
/qr?data=…&shape=dots&color=0369a1&format=png
QR Code por URL (SVG ou PNG).
/qr/<texto>.svg
Atalho com o texto no caminho (também .png).
/qr
JSON com contato, Wi-Fi, texto longo e logo PNG.
/projetos/qr-studio/api/openapi.json
OpenAPI 3.1 gerado do esquema de opções.
FAQ
Perguntas frequentes
Preciso de conta ou de instalar algo?
Não. A tela roda no navegador e a API não pede cadastro. Quem gera em volume pode pedir uma chave para ter uma cota maior.
O que eu digito é enviado a algum servidor?
Na tela, não: o conteúdo, a imagem do logo e a senha de Wi-Fi ficam no seu navegador. Só vão ao servidor contadores anônimos (o nome de uma ação, como baixar um PNG, e um número), e nada é enviado se o seu navegador pede para não ser rastreado (Do Not Track ou Global Privacy Control).
E na API?
Pela API o conteúdo chega ao servidor, porque é preciso para desenhar a imagem. Ele não é guardado em banco nem em disco, e o servidor não registra a URL de /qr. Para contato e senha de Wi-Fi use o POST: na URL esses dados ficam em logs de proxies e do seu cliente.
A API tem as mesmas opções da tela?
Tem, com os mesmos nomes. As duas usam o mesmo esquema de opções, e um teste confere que o conjunto de controles da tela é o do esquema e que a imagem da API é a da interface. Valor inválido ou opção desconhecida é erro 400 com a lista do que está errado.
Quais são os limites da API?
Sem chave, 60 pesos por minuto e 1.200 por hora por IP, com imagem de até 1.024 px. O SVG pesa 1, o PNG 6, o logo soma 2, o tamanho acima de 1.024 px soma 3 e o conteúdo grande soma mais (acima de 400 caracteres, 1; acima de 1.200, 3), porque o PNG e o conteúdo grande custam de 25 a 60 vezes mais processamento. Com chave, a cota é a da sua chave e a imagem vai até 2.048 px. No máximo dois PNG são gerados ao mesmo tempo; o excesso recebe 503 com Retry-After.
Dá para adivinhar uma chave de API?
É contra isso que existe a trava: cinco chaves erradas em 15 minutos a partir do mesmo IP impedem novas tentativas com chave nesse IP até a janela acabar, até com a chave certa. As chaves têm no mínimo 24 caracteres e só o hash fica na memória.
O logo atrapalha a leitura?
Pode, se for grande demais. Por isso o app sobe a correção para H sozinho, calcula o tamanho máximo garantido para aquele conteúdo e mostra uma marca na barra. Passou do limite, o cartão do logo fica vermelho e o botão Testar leitura confirma.
O que significa o selo de contraste?
É a razão de contraste do WCAG entre os módulos e o fundo. Acima de 4,5 é bom, de 3 a 4,5 é atenção e abaixo de 3 o QR pode não ler. QR invertido (módulos mais claros que o fundo) fica em atenção mesmo com bom contraste, porque muitos leitores não o entendem.
O Testar leitura garante que o meu celular lê?
Não é uma garantia, é uma conferência: ele usa um leitor de teste (jsQR) no QR exatamente como será exportado, no tamanho normal, pequeno e borrado. Se passar, é um bom sinal; antes de imprimir em quantidade, aponte a câmera do celular para o código.
Por que o PNG não tem exatamente 1.024 px?
Porque o PNG usa um número inteiro de pixels por módulo, para as bordas ficarem nítidas. O tamanho real fica perto do pedido e aparece na tela. Para qualquer tamanho exato, use o SVG, que é vetor.
QR Code é marca registrada?
Sim, QR Code é marca registrada da Denso Wave. O QR Studio só gera códigos no padrão público ISO/IEC 18004.
Gostou do QR Studio? Dá para apoiar o trabalho: Me pague um café
Continue explorando
Veja também
Mercado Helper
Listas de compras para usar no celular: marque o que foi para o carrinho, veja o total e consulte o histórico.
Ver projeto No arShareSoFast
Compartilhe um arquivo de até 25 MB por um link curto, com senha e uma carta opcional. Depois de 1 dia, tudo é apagado de verdade.
Ver projeto No arRec2Link
Grave a tela, o áudio, os dois ou só a webcam direto no navegador. O arquivo é comprimido aí mesmo, ganha um link curto e é apagado sozinho em 24 horas.
Ver projeto