Creating Your Own QR Code Generator with jQuery and Bootstrap

QR codes are ubiquitous in our daily lives, often taking up too much space on business cards and not always aesthetically pleasing. Yet, they serve as a crucial link between the physical and digital worlds. Most modern smartphones and tablets can scan these pixelated squares without needing an additional app.

Despite their prevalence, few applications allow users to generate QR codes securely. Many turn to free online generators, but this raises concerns about data privacy—especially when dealing with sensitive links, such as internal company URLs or personal cloud links. The solution? Building a trustworthy QR code generator using jQuery.

DEMO

01. Basics

In this guide, we will utilize the GitHub project “jquery.qrcode.js.” This jQuery-based script simplifies the process of creating QR codes. However, it lacks an export function and does not support input fields by default. This limitation is beneficial, as it allows us to build upon a solid foundation without needing to understand the intricate calculations behind QR code generation.

02. jquery.qrcode.js

We will begin by exploring the essential functionalities of “jquery.qrcode.js.” Following the documentation, we will integrate jQuery and “jquery.qrcode.js” into our HTML document and set the necessary parameters. The QR code will be displayed within a canvas element in the div tag labeled “output.”

		Basics

03. QR Code Generator with Bootstrap

To enhance the visual appeal of our QR code generator, we will employ Bootstrap 5.2 as our CSS framework. An input field will be included in our HTML document, allowing users to enter text. Upon clicking the “Go!” button, the script will convert the text into a QR code. Since each click generates a new canvas without replacing existing QR codes, we will reset the div tag “output” using the “empty()” function immediately after the button is pressed.

Next, we will create the QR code in the desired dimensions. Additionally, we aim to enable users to download the generated graphic. By using “canvas.toDataURL,” we can convert the newly created canvas into a “PNG” or “JPG” image. The download will only occur after a QR code is successfully generated. To avoid file name duplication, we will incorporate a four-digit random number into the filename.

And just like that, we have our very own QR code generator.

    QR-Code Generator

		  Über
		  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

		  QR-Code Generator

					☺

				120px

				220px

jQuery(function(){
	$('#go').on('click', function() {
		var url = $('#qrlink').val();
		if ($('#qrlink').val().length > 0) {
			$('#output').empty();
			if ($('#small').prop('checked')) {
				var size = 120
			}
			else {
				var size = 220
			}
			jQuery('#output').qrcode({
				width: size,
				height: size,
				text: url
			});
			var canvas = document.querySelector('#output canvas');
			var png = canvas.toDataURL('image/png');
			var jpg = canvas.toDataURL('image/jpeg');
			var random = Math.round(Math.random() * 9000 - 1000);
			$('#export-png').on('click', function() {
				var dl = document.createElement('a');
				dl.setAttribute('href', png);
				dl.setAttribute('download', 'qrcode-' + random + '.png');
				dl.click();
			});
			$('#export-jpg').on('click', function() {
				var dl = document.createElement('a');
				dl.setAttribute('href', jpg);
				dl.setAttribute('download', 'qrcode-' + random + '.jpg');
				dl.click();
			});
		}
		else {
			$('#qrlink').attr('placeholder','Bitte URL hier eintragen');
			$('#qrlink').focus();
		}
	});
})
$('#cleaner').on('click', function() {
	$('#qrlink').val('');
	$('#output').empty();
	location.reload(true);
});

04. Download

I have compiled all the files needed for this guide to streamline the setup process. I hope you enjoy this project as much as I did, and I wish you success in your endeavors.

artsblog-qrcode-creator-master

Filesize: 1.4 mb