Generar código QR con JavaScript

Si en algún momento nos encontramos con un proyecto que desea implementar código QR en sus requerimientos. Aquí tenemos una opción en JavaScript, la librería qrcodejs, que soporte diferente navegadores, trabaja con Canvas HTML5 y no necesita de otras dependencias.

Ver ejemplo

Uso básico

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "https://www.ribosomatic.com");
</script>

Uso avanzado

Puedes especificar algunas opciones iniciales, como el tamaño de la imagen QR, colores y nivel de distorsión.

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "https://www.ribosomatic.com",
	width: 128,
	height: 128,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
});
</script>

Te puede interesar: Crear ventana de suscripción con jQuery

Ejemplo funcional

Haciendo uso de esta librería, te dejo el código de como podemos hacer nuestro formulario de generador de código QR:

<!DOCTYPE html>
<html lang="es">
	<head>
    <meta charset="utf-8">
		<title>Generador QR con Javascript</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="qrcode.js"></script>
	</head>
	<body>
		<input id="text" type="text" value="http://www.ribosomatic.com" style="width:80%" /><br />
		<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
		<script type="text/javascript">
		// Genera el objeto qrcode
		var qrcode = new QRCode(document.getElementById("qrcode"), {
			width : 100,
			height : 100
		});
		// Funcion para crear el codigo
		function makeCode () {
			var elText = document.getElementById("text");
			if (!elText.value) {
				alert("Ingresa un texto");
				elText.focus();
				return;
			}
			qrcode.makeCode(elText.value);
		}
		// Al cargar crear el qr inicial
		makeCode();
		// Al pulsar teclar Enter, genera en QR
		$("#text").
			on("blur", function () {
				makeCode();
			}).
			on("keydown", function (e) {
				if (e.keyCode == 13) {
					makeCode();
				}
			});
		</script>
	</body>
</html>

Si por el contrario solo deseas generar tú codigo QR, sin necesidad de programación. Aqui una opcion: https://chart.googleapis.com/chart?chs=300×300&cht=qr&choe=UTF-8&chl=https://www.ribosomatic.com

Leave a Reply Cancel reply