E aí pessoal, mais tenho mais uma aula rápida, como podemos gerar um QR Code fácil fácil usando o serviço de gráficos do Google – Google Charts – e você pode ver o gerador da aula de hoje funcionando aqui – https://www.blogson.com.br/gerador-de-qr-code-online/
Gerador de QR Code com Google Charts
Este é um serviço público da Google, ou seja, não precisamos de uma API para gerarmos QR Code pelo serviço Google Charts, você só precisa usar a seguinte url e passar o texto do QR Code como parâmetro.
https://chart.googleapis.com/chart?chs=500×500&cht=qr&chl=SEU CONTEÚDO DO QR CODE AQUI
Portanto se quisermos criar uma url para blogson.com.br, ficaria assim
https://chart.googleapis.com/chart?chs=500×500&cht=qr&chl=https://www.blogson.com.br
Gerador de QR Code com jQuery – Criando o Formulário.
O formulário é difícil, temos que criar um campo de texto ou área de texto e carregar o jQuery em nossa página. Perceba também que já atribuí um ID para o textarea e também deixei uma tag <img> criada, é nesta tag que iremos carregar o nosso QR Code.
<h1>
Gerador de QR Code com jQuery
</h1>
<textarea maxlength="256" rows="3" id="conteudoQRCode"></textarea>
<br/>
<button type="button">
Gerar QR Code
</button>
<br/><br/>
<img id="imageQRCode" src="https://www.blogson.com.br/wp-content/uploads/2020/12/Gerar-QR-Code-com-jQuery-ou-JavaScript-1.png">
Função jQuery para gerar QR Code
Para quem já tem facilidade com jQuery já manjou o que temos que fazer aqui, temos que pegar o conteúdo do textarea e concatenar com a url disponibilizada pela Google Charts.
Esta é a função mais simples possível;
$('button').click(function()
{
var conteudo = $('#conteudoQRCode').val();
var GoogleCharts = 'https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=';
var imagemQRCode = GoogleCharts + conteudo;
$('#imageQRCode').attr('src', imagemQRCode);
});
Função JavaScript parar gerar QR Code (DOM JS)
Se você deseja usar DOM JS ao invés do jQuery você pode usar esta função e chamá-la no evento onclick() do botão.
function GeraQRCode()
{
var conteudo = document.getElementById('conteudoQRCode').value;
var GoogleCharts = 'https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=';
var imagemQRCode = GoogleCharts + conteudo;
document.getElementById('imageQRCode').src = imagemQRCode;
}Bem é isso, muito fácil…. Se gostou do artigo por favor deixe uma mensagem nos comentários abaixo, até +.
