Створення власного генератора QR-кодів за допомогою jQuery та Bootstrap

QR-коди стали невід'ємною частиною нашого повсякденного життя. Вони зустрічаються на упаковках, стікерах, квитках та рекламних банерах, виконуючи роль моста між фізичним і цифровим світом. Сьогодні практично кожен сучасний смартфон або планшет може без додаткових додатків сканувати QR-коди за допомогою камери.

Однак, незважаючи на їх поширеність, більшість програм для створення QR-кодів є обмеженими. Зазвичай, користувачі звертаються до безкоштовних онлайн-генераторів, але тут виникає питання безпеки даних. Не завжди хочеться, щоб певні посилання, наприклад, на приватні хмари або внутрішні корпоративні ресурси, були доступні в публічних базах даних. Тому ідея створення власного генератора QR-кодів, яким можна довіряти, виглядає дуже привабливою. Сьогодні ми розглянемо, як за допомогою jQuery створити власний QR-код генератор.

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-код. Оскільки при кожному натисканні кнопки „Go!“ створюється новий 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 МБ