Генератор QR-кодов: коррекция ошибок, форматы и применение

QR-коды встречаются повсюду — на упаковке товаров, в меню ресторанов, на билетах и экранах входа. Как разработчику вам нужно генерировать их для URL, диплинков приложений, WiFi-учётных данных, vCard и настройки 2FA. Но для этого важно понимать: какой уровень коррекции ошибок выбрать, какой формат использовать и какой размер достаточен. Попробуйте Генератор QR-кодов по ходу чтения.

Как QR-коды хранят данные

QR-код — это двумерный матричный штрихкод, который кодирует данные в виде паттерна чёрных и белых квадратов (модулей). Сканер считывает паттерн и декодирует байты обратно в текст или бинарные данные.

QR-коды поддерживают четыре режима кодирования, выбираемых автоматически по содержимому:

Практический вывод: URL в верхнем регистре использует буквенно-цифровой режим и кодируется компактнее, чем в нижнем. HTTPS://EXAMPLE.COM/PROMO создаёт менее плотный QR-код, чем https://example.com/promo.

Уровни коррекции ошибок

QR-коды используют коррекцию ошибок Рида–Соломона, которая позволяет сканеру восстановить исходные данные, даже если часть кода повреждена, загрязнена или закрыта. Существует четыре уровня:

Правило: Используйте M в большинстве случаев. Выбирайте H только если нужно наложить логотип или код будет напечатан на грубых поверхностях.

Версии и физический размер

«Версии» QR-кодов (1–40) описывают размер сетки модулей. Версия 1 — 21×21 модуль, версия 40 — 177×177. Библиотека автоматически выбирает минимальную версию для вашего контента с учётом уровня коррекции ошибок.

При печати стандарт ISO рекомендует размер модуля не менее 0,25 мм. QR-код версии 5 (37×37 модулей) требует минимум 9,25 мм × 9,25 мм для надёжного сканирования.

Для цифрового использования (экраны, PDF, email) рендерьте с минимальным размером 200×200 px. Для печати экспортируйте как SVG — он масштабируется без потери качества.

Форматы: PNG или SVG

SVG QR-коды — векторная графика: каждый модуль представляет собой элемент <rect>. Это означает идеальное масштабирование для крупной печати и возможность стилизации через CSS (цвета, скруглённые углы, встроенный логотип).

<!-- Структура SVG QR-кода (упрощённо) -->
<svg viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
  <!-- Каждый rect — один модуль -->
  <rect x="0" y="0" width="1" height="1" fill="#000"/>
  <rect x="1" y="0" width="1" height="1" fill="#000"/>
  <!-- ... 800+ элементов для типичного URL ... -->
</svg>

Форматы данных для распространённых сценариев

QR-коды — это просто байты, но для структурированных типов данных существуют соглашения, чтобы телефоны знали, как их обрабатывать.

URL

Обычная строка URL. Держите её короткой — каждый лишний символ увеличивает плотность кода. Используйте сокращатели для ссылок с UTM-метками.

https://example.com/promo?utm_source=qr

WiFi-учётные данные

Android и iOS поддерживают сканирование QR-кодов для подключения к WiFi. Формат — строка, начинающаяся с WIFI::

WIFI:T:WPA;S:МояСеть;P:МойПароль123;;

Поля: T — тип аутентификации (WPA, WEP или nopass), S — SSID, P — пароль, H = true если сеть скрытая. Спецсимволы в SSID и пароле нужно экранировать обратным слешем: ;, ,, ", \.

Контакт vCard

BEGIN:VCARD
VERSION:3.0
FN:Иван Иванов
ORG:Компания
TEL;TYPE=WORK,VOICE:+7-999-123-4567
EMAIL:ivan@company.ru
URL:https://company.ru
END:VCARD

Держите vCard краткой. Длинные vCard создают плотные, плохо сканируемые коды. Включайте только важные поля.

Настройка 2FA / TOTP

Приложения аутентификации сканируют URI otpauth:// для настройки TOTP:

otpauth://totp/Компания:ivan@company.ru?secret=JBSWY3DPEHPK3PXP&issuer=Компания&algorithm=SHA1&digits=6&period=30

Параметры:

• secret — общий секрет в base32 (генерируется инструментом OTP)
• issuer — название приложения в аутентификаторе
• digits — 6 (стандарт) или 8
• period — 30 секунд (стандарт)
• algorithm — SHA1 (максимальная совместимость), SHA256 или SHA512

Email

mailto:support@example.com?subject=Вопрос&body=Здравствуйте

SMS

sms:+79991234567?body=Привет

Геокоординаты

geo:55.7558,37.6176

Программная генерация QR-кодов

Для серверной генерации (Node.js, API, CI-пайплайны) наиболее популярна библиотека qrcode:

npm install qrcode

import QRCode from 'qrcode';

// Data URL (PNG, для тега <img>)
const dataUrl = await QRCode.toDataURL('https://example.com', {
  errorCorrectionLevel: 'M',
  width: 300,
  margin: 2,
});

// SVG-строка
const svg = await QRCode.toString('https://example.com', {
  type: 'svg',
  errorCorrectionLevel: 'M',
});

// Запись в файл
await QRCode.toFile('./qr.png', 'https://example.com', {
  errorCorrectionLevel: 'H',
  width: 500,
});

Для клиентской генерации (React) используйте qrcode.react:

import { QRCodeSVG } from 'qrcode.react';

export function MyQRCode({ value }: { value: string }) {
  return (
    <QRCodeSVG
      value={value}
      size={256}
      level="M"           // L | M | Q | H
      includeMargin={true}
    />
  );
}

Советы по надёжности сканирования

• Тихая зона: QR-коды требуют пустой границы (тихой зоны) не менее 4 модулей со всех сторон. Большинство генераторов добавляют её автоматически — не обрезайте.
• Контраст: Чёрный на белом — наиболее надёжно. Тёмный цвет на светлом фоне обычно работает. Избегайте низкоконтрастных комбинаций.
• Наложение логотипа: При добавлении логотипа используйте уровень H. Логотип не должен занимать более 30% площади кода.
• Минимальный размер при печати: Держите модули не менее 0,25 мм. Для кода версии 5 это примерно 1×1 см минимум.
• Инвертированные цвета: Белый на чёрном работает не на всех сканерах. Используйте тёмный цвет на светлом фоне для максимальной совместимости.
• Тестируйте перед печатью: Всегда сканируйте сгенерированный код на нескольких устройствах (Android и iOS) перед крупным тиражом.

Краткая справка

Генерируйте QR-коды для всех этих сценариев прямо в браузере с помощью Генератора QR-кодов — без сервера, данные не покидают ваш компьютер.