Un generador de códigos QR es una aplicación que almacena los datos de texto requeridos en un código QR que luego se puede escanear con un escáner de códigos QR para revelar la información almacenada. Este Código QR se puede utilizar en cualquier lugar, por ejemplo, en un cartel o sitio web para permitir a los usuarios obtener información adicional. Esta aplicación permitirá al usuario ingresar los datos requeridos y guardarlos como una imagen PNG o SVG del código QR.
Planteamiento: Para generar el código QR, utilizaremos la API de Google Charts . Usando jQuery, la imagen del código QR que se mostrará se actualiza de acuerdo con la imagen devuelta por la API.
El punto de conexión de la API que se usaría se proporciona a continuación.
https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=Hola%20mundo
Explicación de la URL:
- La URL raíz de Google Chart Infographics es https://chart.googleapis.com/chart . Esto se puede especificar con los parámetros requeridos para generar la salida deseada.
- El parámetro chs indica el tamaño de la imagen del código QR en píxeles.
- El parámetro cht indica el tipo de imagen que se creará. El valor “qr” se utilizará para generar un Código QR.
- El parámetro chl denota el texto o los datos de URL que se codificarán en el código QR.
Ejemplo:
HTML
<!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>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por tarundhamor y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA