Como criar um gerador de QR Code com jQuery / JS, Muito Fácil

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é +.