Ligue: 24/7/ em (65) 99616-0524

GERADOR DE CÓDIGO QR USANDO HTML, CSS E JQUERY - COPIE E COLE!

Um gerador de códigos QR feito em HTML, é uma aplicação que encapsula todos os dados textuais necessários em um código QR.

Esse código pode ser posteriormente lido por um leitor de códigos QR para revelar as informações armazenadas.

Este código QR pode ser aplicado em diversos contextos, como em um pôster ou site, proporcionando aos usuários o acesso a informações adicionais.

Através deste aplicativo, os usuários têm a capacidade de inserir os dados necessários e salvar a imagem resultante em formato PNG ou SVG do código QR.

Abordagem Html:

Para criar o código QR, faremos uso da API Google Charts. Com o auxílio do jQuery, a imagem do código QR a ser exibida será atualizada conforme a imagem retornada pela API.

Para elevar ainda mais seu gerador de códigos QR, considere incorporar funcionalidades avançadas, como a personalização com logotipos e ícones.

Isso não apenas adiciona identidade visual, mas também amplia as opções para marcas.

Além disso, explore a inclusão de suporte para diferentes tipos de dados nos códigos QR, permitindo aos usuários incorporar links, informações de contato ou até eventos de calendário.

Essa versatilidade expande as possibilidades de uso. Veja nosso gerador de qr code profissional, também começamos um um simples gerador de qr code, parecido ao que você vai ver ao decorre desse artigo: GERADOR DE CÓDIGO QR USANDO HTML, CSS E JQUERY

Ao buscar inovação constante, você mantém sua aplicação relevante e alinhada às expectativas do usuário.

Continue a explorar novas possibilidades para manter seu gerador de códigos QR na vanguarda do desenvolvimento digital.

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:

  • 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:

GERADOR DE CÓDIGO QR USANDO HTML, CSS E JQUERY - COPIE E COLE!
<!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>
qr output

O jQuery representa uma biblioteca JavaScript de código aberto projetada para simplificar as interações entre um documento HTML/CSS.

Reconhecida por sua filosofia de “Escreva menos, faça mais”, ela oferece uma abordagem eficiente para o desenvolvimento web.

Você pode aprender jQuery desde o início, seguindo este Tutorial jQuery e Exemplos de jQuery .

As postagens do blog te ajudaram? Que ótimo!

Se você quer um qr code mais elaborado e bonito, com mais funções, etc. entre em contato, podemos personalizar naquele precinho camarada, basta clicar aqui!

Post Recente:

Damos valor à sua privacidade

Nós e os nossos parceiros armazenamos ou acedemos a informações dos dispositivos, tais como cookies, e processamos dados pessoais, tais como identificadores exclusivos e informações padrão enviadas pelos dispositivos, para as finalidades descritas abaixo. Poderá clicar para consentir o processamento por nossa parte e pela parte dos nossos parceiros para tais finalidades. Em alternativa, poderá clicar para recusar o consentimento, ou aceder a informações mais pormenorizadas e alterar as suas preferências antes de dar consentimento. As suas preferências serão aplicadas apenas a este website.

Cookies estritamente necessários

Estes cookies são necessários para que o website funcione e não podem ser desligados nos nossos sistemas. Normalmente, eles só são configurados em resposta a ações levadas a cabo por si e que correspondem a uma solicitação de serviços, tais como definir as suas preferências de privacidade, iniciar sessão ou preencher formulários. Pode configurar o seu navegador para bloquear ou alertá-lo(a) sobre esses cookies, mas algumas partes do website não funcionarão. Estes cookies não armazenam qualquer informação pessoal identificável.

Cookies de desempenho

Estes cookies permitem-nos contar visitas e fontes de tráfego, para que possamos medir e melhorar o desempenho do nosso website. Eles ajudam-nos a saber quais são as páginas mais e menos populares e a ver como os visitantes se movimentam pelo website. Todas as informações recolhidas por estes cookies são agregadas e, por conseguinte, anónimas. Se não permitir estes cookies, não saberemos quando visitou o nosso site.

Cookies de funcionalidade

Estes cookies permitem que o site forneça uma funcionalidade e personalização melhoradas. Podem ser estabelecidos por nós ou por fornecedores externos cujos serviços adicionámos às nossas páginas. Se não permitir estes cookies algumas destas funcionalidades, ou mesmo todas, podem não atuar corretamente.

Cookies de publicidade

Estes cookies podem ser estabelecidos através do nosso site pelos nossos parceiros de publicidade. Podem ser usados por essas empresas para construir um perfil sobre os seus interesses e mostrar-lhe anúncios relevantes em outros websites. Eles não armazenam diretamente informações pessoais, mas são baseados na identificação exclusiva do seu navegador e dispositivo de internet. Se não permitir estes cookies, terá menos publicidade direcionada.

Visite as nossas páginas de Políticas de privacidade e Termos e condições.

Importante: Este site faz uso de cookies que podem conter informações de rastreamento sobre os visitantes.
Criado por WP RGPD Pro