Генератор QR-кодов на HTML, CSS и JavaScript: урок

QR-код — двумерный штрихкод, который хранит текст как сетку чёрно-белых квадратов («модулей»). Три больших квадрата по углам помогают сканеру найти и повернуть код. Остальная сетка несёт данные и их избыточность. QR хранит только текст. Телефон читает текст и, если он похож на URL, предлагает открыть. Поэтому QR может вести куда угодно — в безопасное или вредное место.

Этот урок соединяет библиотеку, canvas и скачивание файла в одном маленьком проекте.

• Превратить ссылку сайта в QR для печати
• Положить текст в QR офлайн
• Научиться подключать готовую библиотеку
• Скачать PNG через canvas.toDataURL

Проект — четыре файла: index.html, style.css, script.js и lib/qrcode-generator.js (Kazuhiko Arase, MIT, v1.4.4). HTML сначала грузит библиотеку, потом script.js. При отправке формы код проверяет текст, строит матрицу модулей через qrcode(0, 'M') и рисует её на canvas. Размер — от 128 до 512 px, цвета — из <input type="color">. Одинаковый цвет переднего плана и фона отклоняется: такой код не сканируется. href кнопки скачивания становится canvas.toDataURL('image/png'), поэтому PNG совпадает с экраном. Если библиотека — локальный файл, инструмент работает и офлайн. Полный QR-инструмент с многими типами — на /qr.

Кодировать QR с нуля трудно: выбор версии, блоки, коррекция ошибок Рида–Соломона и маска. Поэтому берут готовую библиотеку. Уровень M выдерживает около 15% повреждений, но не исправляет плохой контраст и обрезанную тихую зону. Очень длинный текст требует много модулей: если на модуль при 128 px приходится меньше пикселя, код не рисуется и просят размер больше. При слишком большом тексте библиотека бросает «code length overflow», код ловит это и показывает понятное сообщение.

Плюс: нет сборки, нет сервера, текст никуда не уходит, работает офлайн. Ограничение: если QR сканируется, это не значит, что он безопасен. Считай незнакомый QR непроверенной ссылкой и читай домен перед открытием.

Основные понятия, на которых стоит код:

• qrcode(0, 'M'): 0 = версию выбирает сама, M = ~15% коррекции
• isDark(row, col): этот модуль тёмный?
• Тихая зона: 4 пустых модуля по краю
• Скачивание через canvas.toDataURL('image/png')

Вызов библиотеки, рисование на canvas и ссылка на PNG:

1. Превращаем текст в матрицу QR:

// <script src="lib/qrcode-generator.js"></script> loads window.qrcode
const qr = qrcode(0, "M");
qr.addData(text, "Byte");
qr.make();
const modules = qr.getModuleCount();

qrcode(0, "M") создаёт пустой объект QR: 0 — версию (размер) выбирает библиотека, M — ~15% коррекции ошибок.

addData добавляет текст как байты UTF-8, а make() строит всю матрицу модулей.

modules — число квадратов на одной стороне, например 25 для короткой ссылки. На экране пока ничего нет, есть только таблица тёмных и светлых клеток.

2. Размер модуля в пикселях и тихая зона:

const QUIET_ZONE = 4;
const cell = Math.floor(size / (modules + QUIET_ZONE * 2));
if (cell < 1) throw new Error("Choose a larger size for this much text.");
const offset = Math.floor((size - cell * modules) / 2);

QUIET_ZONE — пустая рамка в 4 модуля вокруг кода. По этому промежутку сканер находит код.

cell — сколько пикселей получает один квадрат: выбранный размер (например 256 px) делится на модули плюс рамку.

Если cell меньше 1, код не помещается в этот размер. Вместо обрезанного QR пользователю предлагают выбрать размер больше.

offset ставит код в центр canvas.

3. Рисуем матрицу на canvas:

canvas.width = canvas.height = size;
const ctx = canvas.getContext("2d");
ctx.fillStyle = bg;
ctx.fillRect(0, 0, size, size);
ctx.fillStyle = fg;
for (let r = 0; r < modules; r++)
  for (let c = 0; c < modules; c++)
    if (qr.isDark(r, c)) ctx.fillRect(offset + c * cell, offset + r * cell, cell, cell);

Сначала весь canvas заливается цветом фона (bg) — это светлый квадрат и тихая зона.

Два цикла проходят по каждой строке и столбцу. Когда isDark(r, c) равно true, там рисуется квадрат цветом переднего плана (fg).

Результат: QR-код на экране — три угловых квадрата и точки между ними.

4. Ссылка на скачивание PNG:

downloadLink.href = canvas.toDataURL("image/png");

toDataURL превращает картинку на canvas в файл PNG и кладёт его в ссылку.

При нажатии Download PNG браузер сохраняет этот файл. Он того же размера и цвета, что и превью, потому что взят с того же canvas.

Весь путь: текст → матрица → canvas → PNG.

• QR-коды бесплатны? Да. Стандарт открыт, библиотека под лицензией MIT.
• Нужен ли интернет? Нет, после того как страница и локальная библиотека загрузились один раз.
• Текст уходит на сервер? Нет. Кодирование в браузере, без fetch, cookie и аналитики.
• Если QR сканируется, сайт безопасен? Нет. QR — просто текст, проверяй домен сам.
• Где полный инструмент? На nibrascode.com/qr.