QRCode com JavaScript
Criando um qrcode com javascript
[click here for English]
Hoje tudo para tudo usamos o QRCode, e o mesmo nos dá muita facilidade para compartilhar pequenas informações, por tanto, vamos agora usando uma lib js, mostrar como é simples e fácil criar um QRCode com javascript.
Código
Primeiro vamos criar a interface, faremos algo simples, utilizando apenas HTML.
Nesta primeira parte, temos as entradas de dados, como altura, largura e cores, também temos um botão para fazer o download do nosso QRCode uma div que irá exibir o qrcode e por fim temos a tag script que faz o carregamento da biblioteca davidshimjs hoje já existe diversas bibliotecas, mas essa é a que achei mais simples de demonstrar o uso, mas você pode usar a biblioteca que mais lhe agrada.
No nosso código javascript. primeiro pegamos todos os elementos da tela (altura, largura, cores e etc) e então adicionamos o evento de click no nosso botão de Gerar e chamamos a função generate
Na função generate primeiro pegamos o elemento onde fica o qrcode e fazemos qrcodeEl.innerHTML = ``; dessa forma sempre que gerarmos um qrcode novo o antigo será removido da tela. depois instanciamos o QRCode passando todos os parâmetros necessários (altura, largura, cores e etc) e por fim chamamos a função download
Na função download buscamos o elemento canvas que é gerado pela biblioteca de QRCode e dentro dele pegamos os dados(imagem). com isso adicionamos o valor capturado no link download e definimos o atributo download e mudamos o estilo para que seja exibido na tela.
Agora sempre que um novo QRCode for gerado o link de download será exibido para que seja possível fazer o download do qrcode como imagem
pronto simples assim.
Demo
Veja abaixo o projeto completo funcionando.
Youtube
Se preferir assistir, veja o desenvolvimento no youtube.
Obrigado por ler!
Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!
😊😊 Até mais! 😊😊
