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=150150&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>
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!
