Генератор QR-кодов на TypeScript: qrcode.js

Генератор QR-кодов на TypeScript: qrcode.js и qrcode-generator

QR-коды стали неотъемлемой частью современного веба: от ссылок на сайты и Wi-Fi паролей до контактных данных и платежных реквизитов. В TypeScript-экосистеме существует несколько зрелых библиотек, позволяющих генерировать QR-коды как на стороне клиента (браузера), так и на сервере (Node.js). В этой статье мы подробно разберем две самые популярные: qrcode (qrcode.js) и qrcode-generator, а также покажем, как интегрировать их в TypeScript-проект.

1. qrcode (qrcode.js) — универсальная библиотека

Библиотека qrcode (пакет npm: qrcode) является де-факто стандартом для генерации QR-кодов. Она поддерживает вывод результата в виде canvas, SVG, строки Data URI или простого текста. Благодаря TypeScript-типизации (встроенные типы или @types/qrcode) разработка становится безопасной и удобной.

Установка

npm install qrcode
npm install --save-dev @types/qrcode  # для TypeScript

Базовый пример: генерация QR-кода в canvas (браузер)

import QRCode from 'qrcode';

const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 300 }, (error) => {
  if (error) console.error('Ошибка генерации:', error);
  else console.log('QR-код создан!');
});

Генерация в SVG (для серверного рендеринга)

import QRCode from 'qrcode';

const svgString = await QRCode.toString('https://pythonlib.ru', {
  type: 'svg',
  color: { dark: '#1a1a2e', light: '#eaeaea' }
});
console.log(svgString); // Готовый SVG-код

Параметры настройки

width — ширина QR-кода в пикселях (по умолчанию 256).
margin — отступ от края (в модулях, по умолчанию 4).
color.dark / color.light — цвета модулей и фона.
errorCorrectionLevel — уровень коррекции ошибок: 'L' (7%), 'M' (15%), 'Q' (25%), 'H' (30%).
type — формат вывода: 'png', 'svg', 'utf8'.

2. qrcode-generator — легковесная альтернатива

Библиотека qrcode-generator (пакет npm: qrcode-generator) предлагает минималистичный API и не требует зависимостей. Она идеально подходит, если вам нужно просто получить матрицу QR-кода или сгенерировать его в кастомном формате.

Установка

npm install qrcode-generator

Пример: создание и отрисовка на canvas

import QRCode from 'qrcode-generator';

const qr = QRCode(0, 'M'); // тип (0 = auto) и уровень коррекции
qr.addData('https://pythonlib.ru');
qr.make();

const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;
const size = qr.getModuleCount();
const cellSize = 10;
canvas.width = size * cellSize;
canvas.height = size * cellSize;

for (let row = 0; row < size; row++) {
  for (let col = 0; col < size; col++) {
    ctx.fillStyle = qr.isDark(row, col) ? '#000' : '#fff';
    ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
  }
}

Получение текстового представления (для отладки)

const qr = QRCode(0, 'M');
qr.addData('Hello TypeScript!');
qr.make();
console.log(qr.createASCII()); // Выведет QR-код в консоль символами

3. Сравнение библиотек

Также в библиотеке

Swagger/OpenAPI генерация для Java: библиотеки и инструменты

gRPC для PHP: библиотеки, установка и примеры реализации

gRPC для C# (.NET): библиотеки и примеры использования

Symfony/Security для PHP: полное руководство с примерами

Планировщик задач Rust

Генератор QR-кодов на TypeScript: qrcode.js и qrcode-generator