Генератор QR-кодов на TypeScript: библиотека qrcode |…

Генератор QR-кодов на TypeScript: библиотека qrcode и её использование

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

Что такое библиотека qrcode?

Библиотека qrcode — это популярный npm-пакет, написанный на JavaScript и полностью совместимый с TypeScript. Она позволяет генерировать QR-коды в различных форматах: как строку данных, как SVG, как Canvas (для браузера) или как PNG-изображение (для Node.js). Основные преимущества:

Поддержка всех версий QR-кодов (от 1 до 40).
Настраиваемая коррекция ошибок (L, M, Q, H).
Работа как в браузере, так и в среде Node.js.
Полная поддержка TypeScript — типы включены в пакет.
Простой и интуитивно понятный API.

Установка

Для начала работы установите пакет через npm или yarn:

npm install qrcode

или

yarn add qrcode

Если вы используете TypeScript, дополнительные типы не требуются — они уже встроены в пакет.

Базовый пример: генерация QR-кода в виде строки

Самый простой способ получить QR-код — сгенерировать его в виде строки с данными (например, URL). Для этого используется метод toString:

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'terminal' }, (err, string) => {
  if (err) throw err;
  console.log(string);
});

В этом примере QR-код выводится в консоль в виде ASCII-арта. Это удобно для отладки или демонстрации.

Генерация QR-кода как SVG (для веба)

Для вставки QR-кода на веб-страницу лучше всего использовать формат SVG — он масштабируется без потери качества и легко стилизуется через CSS.

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'svg' }, (err, svgString) => {
  if (err) throw err;
  // Вставьте svgString в DOM, например через innerHTML
  document.getElementById('qrcode-container').innerHTML = svgString;
});

Вы также можете использовать промисы вместо колбэков:

import QRCode from 'qrcode';

async function generateQR() {
  const svgString = await QRCode.toString('https://pythonlib.ru', { type: 'svg' });
  document.getElementById('qrcode-container').innerHTML = svgString;
}

generateQR();

Генерация QR-кода как Canvas (для браузера)

Если вам нужно встраивать QR-код в canvas-элемент (например, для дальнейшей обработки или скачивания), используйте метод toCanvas:

import QRCode from 'qrcode';

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

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 400 }, (err) => {
  if (err) throw err;
  console.log('QR-код успешно отрисован на canvas');
});

Параметр width задаёт ширину canvas (высота рассчитывается автоматически).

Генерация QR-кода как PNG (для Node.js)

Для серверной генерации (например, чтобы сохранить изображение на диск) используйте toFile:

import QRCode from 'qrcode';

QRCode.toFile('./qrcode.png', 'https://pythonlib.ru', {
  color: {
    dark: '#000000',
    light: '#ffffff'
  }
}, (err) => {
  if (err) throw err;
  console.log('QR-код сохранён как qrcode.png');
});

Вы также можете задать цвет модулей и фона, размер, уровень коррекции ошибок и другие параметры.