Создание QR-кода на JavaScript
QR-коды сегодня используются практически повсеместно, благодаря их простоте и быстроте. С помощью QR-кода, например, можно закодировать данные о каком-либо товаре в Интернет-магазине или ссылку на приложение или веб-сайт.
В данной статье я покажу Вам как можно с помощью библиотеки QR.js закодировать текстовые данные, которые пользователь вводит в текстовое поле.
Код далее:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
#app > * {
border: 1px solid green;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
#app > h1 {
grid-column: span 3;
}
.text {
grid-column: span 2;
}
</style>
</head>
<body>
<div id="app">
<h1 class="p-3">Генератор QRCode</h1>
<div class="text">
<form>
<div class="form-group mx-3 my-3">
<label for="qrCodeText">Введите текст в поле:</label><br />
<textarea id="qrCodeText" class="form-control" rows="6"></textarea>
</div>
<div class="form-group mx-3 my-3">
<input type="button" class="btn btn-primary" value="Generate" id="generateQRCode">
</div>
</form>
</div>
<div id="qrCodeOutput" class="text-center">
Здесь будет сгенерированный QR-код
</div>
</div>
<!-- Подключаем библиотеку -->
<script src="http://cosmic.mearie.org/2011/01/qrjs/qr.js"></script>
<script>
/**
* Простая функция для получения DOM-элемента
*
* @param selector {string}
*
* @return HTMLElement
* */
const el = (selector) => document.querySelector(selector);
// при нажатии на кнопку
el('#generateQRCode').addEventListener('click', function() {
// получаем блок куда будет выводиться QR-код
let qrCodeOutput = el('#qrCodeOutput');
// получаем содержимое текстового поля
let text = el('#qrCodeText').value;
// очищаем блок с QR-кодом
qrCodeOutput.innerHTML = "";
// и помещаем в него сгенерированный библиотекой QR-код
qrCodeOutput.append(QRCode.generateHTML(text, {}))
});
</script>
</body>
</html>
Вот так просто можно сгенерировать QR-код в JavaScript.
-
Создано 11.08.2020 12:50:26
-
Михаил Русаков
Комментарии (3):
Спасибо за код. В библиотеке которую мы подключаем есть небольшая ошибка, там, в библиотеке qr.js на 718-719 строчках, в style надо ещё добавить "display: block;", чтобы QRcode корректно отображался, и его можно было бы отсканировать легко. В общем в строке var html = ['<table border="0" cellspacing="0" cellpadding="0" style="border:' + modsize * margin + 'px solid #fff;background:#fff; display: block; ">']; она должна быть такой, тут я просто дисплей блок добавил, и QR код читается и распознается. Просто без дисплей блок, часть QRкода уходит за бордер.
Ответить
Спасибо. Очень полезно. Но ячейки в таблице окрашиваются бэкграундом, а бэкграунд не выводится на печать. Чтобы распечатать QRcode на принтере, я нарисовал квадрат Малевича 5х5 px и в библиотеке qr.js в цикле вставляю его в черную ячейку: html.push('<td> + (matrix[i][j] ? '<img src="black_square.png" height="' + modsize + '"width="' + modsize + '"style="display:block">' : '') + '</td>'); Без display:block ячейка увеличивается относительно картинки для вывода текста и qrcode становится полосатым по горизонтали.
Ответить
Для получения элемента не стоит использовать querySelector. Он не работает в IE. Вместо него я использую getElementById(). По той же причине вместо append - appendChild.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.