Um gerador de código QR é um aplicativo que armazena todos os dados textuais necessários em um código QR que pode ser lido posteriormente com um leitor de código QR para revelar as informações armazenadas. Este código QR pode ser usado em qualquer lugar, por exemplo, em um pôster ou site para permitir que os usuários obtenham informações adicionais. Este aplicativo permitirá ao usuário digitar os dados necessários e salvá-los em uma imagem PNG ou SVG do código QR. 

Abordagem: Para gerar o código QR, usaremos a API Google Charts . Usando jQuery, a imagem do código QR a ser exibida é atualizada de acordo com a imagem retornada pela API.

O endpoint da API que seria usado é fornecido abaixo.

https://chart.googleapis.com/chart?chs=150150&cht=qr&chl=Hello%20world

Explicação do URL:

  • O URL raiz para Google Chart Infographics é https://chart.googleapis.com/chart . Isso pode ser especificado com os parâmetros necessários para gerar a saída desejada.
  • O parâmetro chs denota o tamanho da imagem do código QR em pixels.
  • O parâmetro cht denota o tipo de imagem a ser criada. O valor “qr” será usado para gerar um QR Code.
  • O parâmetro chl denota os dados de texto ou URL a serem codificados no código QR.

Exemplo:

<!DOCTYPE html>
<html>
  
<head>
  <!-- Include Bootstrap for styling -->
  <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
  
  <style>
    .qr-code {
      max-width: 200px;
      margin: 10px;
    }
  </style>
  
  <title>QR Code Generator</title>
</head>
  
<body>
  <div class="container-fluid">
    <div class="text-center">
  
      <!-- Get a Placeholder image initially,
       this will change according to the
       data entered later -->
      <img src=
"https://chart.googleapis.com/chart?cht=qr&chl=Hello+World&chs=160x160&chld=L|0"
        class="qr-code img-thumbnail img-responsive" />
    </div>
  
    <div class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2"
          for="content">
          Content:
        </label>
        <div class="col-sm-10">
  
          <!-- Input box to enter the 
              required data -->
          <input type="text" size="60" 
            maxlength="60" class="form-control"
            id="content" placeholder="Enter content" />
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
  
          <!-- Button to generate QR Code for
           the entered data -->
          <button type="button" class=
            "btn btn-default" id="generate">
            Generate
          </button>
        </div>
      </div>
    </div>
  </div>
  <script src=
    "https://code.jquery.com/jquery-3.5.1.js">
  </script>
  
  <script>
    // Function to HTML encode the text
    // This creates a new hidden element,
    // inserts the given text into it 
    // and outputs it out as HTML
    function htmlEncode(value) {
      return $('<div/>').text(value)
        .html();
    }
  
    $(function () {
  
      // Specify an onclick function
      // for the generate button
      $('#generate').click(function () {
  
        // Generate the link that would be
        // used to generate the QR Code
        // with the given data 
        let finalURL =
'https://chart.googleapis.com/chart?cht=qr&chl=' +
          htmlEncode($('#content').val()) +
          '&chs=160x160&chld=L|0'
  
        // Replace the src of the image with
        // the QR code image
        $('.qr-code').attr('src', finalURL);
      });
    });
  </script>
</body>
  
</html>

Saída:

jQuery é uma biblioteca JavaScript de código aberto que simplifica as interações entre um documento HTML / CSS. É amplamente conhecida por sua filosofia de “Escreva menos, faça mais” .
Você pode aprender jQuery desde o início, seguindo este Tutorial jQuery e Exemplos de jQuery .