Создание собственного генератора QR-кодов с использованием jQuery и Bootstrap

QR-коды стали неотъемлемой частью нашей повседневной жизни, несмотря на то, что они не всегда эстетически привлекательны и могут занимать много места на визитках. Эти маленькие пиксельные квадраты служат связующим звеном между физическим и цифровым мирами. Практически каждое современное устройство — смартфон или планшет — может сканировать QR-коды с помощью встроенной камеры без необходимости устанавливать дополнительные приложения.

Хотя QR-коды встречаются повсюду, только немногие программы позволяют их создавать. Чаще всего для этого используются бесплатные онлайн-генераторы. Однако возникает вопрос: что происходит с данными, которые вы вводите в такие генераторы? Не все ссылки стоит размещать в публичных базах данных. Например, ссылки на вашу облачную хранилище или внутренние ссылки компании могут быть чувствительными. Было бы замечательно иметь генератор QR-кодов, которому можно доверять. Сегодня мы покажем, как создать такой генератор, используя jQuery!

DEMO

01. Основы

В этой статье мы будем работать с проектом на GitHub под названием „jquery.qrcode.js“. Этот скрипт, основанный на jQuery, позволяет легко генерировать QR-коды. Однако он не предоставляет функции экспорта и не поддерживает ввод данных через поля ввода. Это делает его отличной основой для нашего проекта, так как нам не нужно углубляться в детали вычисления QR-кодов.

02. jquery.qrcode.js

Сначала мы рассмотрим основные функции „jquery.qrcode.js“. В этом разделе мы создадим QR-код, следуя документации. Мы подключим jQuery и „jquery.qrcode.js“ к нашему HTML-документу и зададим все необходимые параметры. В элементе div с идентификатором „output“ будет создан элемент Canvas, отображающий QR-код.

		Basics

03. Генератор QR-кодов с Bootstrap

Для того чтобы наш генератор QR-кодов выглядел привлекательно, мы используем Bootstrap 5.2 в качестве CSS-фреймворка. Мы добавим поле ввода в наш HTML-документ, куда можно будет ввести текст. При нажатии кнопки „Go!“ скрипт начнет работу и преобразует текст в QR-код. Так как при каждом нажатии кнопки создается новый Canvas, а существующие QR-коды не заменяются, мы должны сбросить элемент div „output“ с помощью метода „empty()“ сразу после нажатия кнопки.

Далее мы генерируем QR-код нужного размера. Также мы хотим, чтобы созданное изображение можно было скачать. Для этого мы используем метод „canvas.toDataURL“, который преобразует созданный Canvas в изображение формата „PNG“ или „JPG“. Загрузка изображения будет возможна только после создания QR-кода. Чтобы предотвратить повторное использование одного и того же имени файла, мы добавим случайное четырехзначное число.

И вот, наш собственный генератор QR-кодов готов.

    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. Загрузка

Я собрал все файлы этой инструкции, чтобы процесс настройки прошел быстрее. Надеюсь, вы получите столько же удовольствия от проекта, сколько и я, и желаю вам удачи в его реализации.

artsblog-qrcode-creator-master

Размер файла: 1,4 МБ