Интеграция QR-кодов в веб-проект: React, Node.js, SVG и логотип
Отметим: когда встаёт задача генерировать QR-коды для личных кабинетов, электронных билетов или мгновенных платежей — первая мысль: подключить внешний API. Но это добавляет задержки, лимиты запросов и зависимость от чужого сервиса. Мы реализуем генерацию прямо в браузере или на сервере — с полным контролем над стилем, размером, форматом и возможностью добавить логотип внутри кода. Наш подход гарантирует скорость (ни одного лишнего запроса), безопасность и совместимость с любыми носителями — от экрана до типографской печати.
Опыт внедрения таких решений в десятках проектов показывает: клиентская генерация на базе библиотеки qrcode сокращает TTFB на 100–200 мс по сравнению с серверными аналогами, а использование SVG вместо PNG экономит до 80% веса файла. Мы подбираем оптимальный уровень коррекции ошибок, чтобы код оставался читаемым даже при повреждении до 30% площади — особенно важно для QR с логотипом. Экономия на API-запросах при отказе от внешних сервисов составляет от $200 до $500 в месяц. Например, при 10 000 генераций в месяц отказ от внешнего API экономит около $200.
QR-код — стандарт ISO/IEC 18004.
Как интегрировать QR-генератор на React?
Основной инструмент — библиотека qrcode (версия 1.5+). Она поддерживает Canvas, SVG и Data URL, работает в браузере и Node.js. Установка минимальна:
npm install qrcode
npm install -D @types/qrcode
Компонент генератора
import QRCode from 'qrcode'
import { useEffect, useRef, useState } from 'react'
interface QRGeneratorProps {
value: string
size?: number
errorCorrection?: 'L' | 'M' | 'Q' | 'H'
color?: { dark: string; light: string }
}
export function QRGenerator({
value,
size = 256,
errorCorrection = 'M',
color = { dark: '#000000', light: '#ffffff' },
}: QRGeneratorProps) {
const canvasRef = useRef<HTMLCanvasElement>(null)
const [dataUrl, setDataUrl] = useState<string>('')
useEffect(() => {
if (!value || !canvasRef.current) return
QRCode.toCanvas(canvasRef.current, value, {
width: size,
margin: 2,
errorCorrectionLevel: errorCorrection,
color,
})
// Параллельно готовим Data URL для скачивания
QRCode.toDataURL(value, {
width: size * 2, // 2x для чёткости при печати
margin: 2,
errorCorrectionLevel: errorCorrection,
color,
}).then(setDataUrl)
}, [value, size, errorCorrection, color])
function download() {
const a = document.createElement('a')
a.href = dataUrl
a.download = 'qrcode.png'
a.click()
}
return (
<div className="flex flex-col items-center gap-3">
<canvas ref={canvasRef} className="rounded" />
{dataUrl && (
<button onClick={download} className="text-sm text-blue-600 hover:underline">
Скачать PNG
</button>
)}
</div>
)
}
Этот компонент генерирует QR-код на Canvas и параллельно создаёт Data URL для скачивания в PNG с удвоенным разрешением. Поддерживаются все четыре уровня коррекции ошибок: L (7%), M (15%), Q (25%), H (30%). Для обычных задач достаточно M, для кода с логотипом — H.
Почему клиентская генерация быстрее серверной?
Сравним: при серверной генерации каждый запрос проходит через сеть, нагружает CPU сервера и требует кеширования. Клиентская генерация выполняется мгновенно — без задержек на передачу данных. По нашим замерам, на средней машине генерация QR-кода размером 256×256 занимает менее 10 мс. Это особенно критично для динамических страниц, где код генерируется при каждом просмотре (например, в личном кабинете).
| Параметр | Клиентская генерация | Серверная генерация |
|---|---|---|
| Задержка до первого байта | 0 мс (локально) | 50–200 мс (сеть) |
| Нагрузка на сервер | Нет | Высокая при >1000 запросов/сек |
| Кеширование на CDN | Не требуется | Желательно |
| Возможность офлайн | Да | Нет |
Для случаев, когда QR-код нужно отправить в письме или встроить в PDF, мы используем серверную генерацию через Node.js — см. раздел ниже.
SVG-версия для встраивания в страницу
import QRCode from 'qrcode'
import { useState, useEffect } from 'react'
function QRCodeSVG({ value, size = 200 }: { value: string; size?: number }) {
const [svg, setSvg] = useState<string>('')
useEffect(() => {
QRCode.toString(value, { type: 'svg', width: size, margin: 1 })
.then(setSvg)
}, [value, size])
return (
<div
dangerouslySetInnerHTML={{ __html: svg }}
className="inline-block"
/>
)
}
SVG масштабируется без потери качества — подходит для PDF и печатных материалов. Вес файла в 5–10 раз меньше, чем PNG той же размерности.
QR с логотипом в центре
QR-код с уровнем коррекции H выдерживает до 30% закрытой площади — можно вставить логотип:
async function generateQRWithLogo(text: string, logoUrl: string): Promise<string> {
const canvas = document.createElement('canvas')
const size = 400
await QRCode.toCanvas(canvas, text, {
width: size,
margin: 2,
errorCorrectionLevel: 'H', // Обязательно H при наличии логотипа
color: { dark: '#000000', light: '#ffffff' },
})
const ctx = canvas.getContext('2d')!
const logo = new Image()
logo.crossOrigin = 'anonymous'
await new Promise<void>((resolve) => {
logo.onload = () => resolve()
logo.src = logoUrl
})
const logoSize = size * 0.18 // 18% от размера QR
const logoX = (size - logoSize) / 2
const logoY = (size - logoSize) / 2
// Белый фон под логотипом
ctx.fillStyle = '#ffffff'
ctx.beginPath()
ctx.roundRect(logoX - 4, logoY - 4, logoSize + 8, logoSize + 8, 6)
ctx.fill()
ctx.drawImage(logo, logoX, logoY, logoSize, logoSize)
return canvas.toDataURL('image/png')
}
Логотип накладывается поверх сгенерированного QR-кода. Важно: уровень коррекции H обязателен, иначе код перестанет сканироваться. Размер логотипа — не более 20% от ширины QR, иначе ошибка коррекции не спасёт.
Серверная генерация (Node.js)
Отметим: когда QR нужно вставить в PDF или отправить в письме — генерируем на сервере:
import QRCode from 'qrcode'
// Express / Next.js API route
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const text = searchParams.get('text')
if (!text) return new Response('Missing text', { status: 400 })
const buffer = await QRCode.toBuffer(text, {
type: 'png',
width: 400,
errorCorrectionLevel: 'M',
})
return new Response(buffer, {
headers: {
'Content-Type': 'image/png',
'Cache-Control': 'public, max-age=3600',
},
})
}
Серверный эндпоинт возвращает PNG-изображение с кешированием на один час — достаточно для большинства сценариев (билеты, купоны).
Пошаговая интеграция
- Установите библиотеку
qrcodeв проект. - Создайте React-компонент с использованием Canvas (как показано выше).
- Настройте уровни коррекции и цвета через props.
- Добавьте кнопку для скачивания PNG.
- Для SVG замените Canvas на функцию
QRCode.toString. - Для логотипа используйте уровень H и наложение изображения.
- Для серверной генерации создайте API-роут, возвращающий буфер PNG.
Уровни коррекции ошибок
| Уровень | Процент восстановления | Рекомендация |
|---|---|---|
| L | 7% | Максимальная плотность данных |
| M | 15% | Стандартный выбор |
| Q | 25% | Повышенная надёжность |
| H | 30% | Обязательно при логотипе |
Что входит в нашу работу
Мы предлагаем внедрение QR-генератора под ключ: выбор библиотеки, разработка React-компонента с кастомизацией, интеграция SVG и логотипа, создание серверного API, тестирование на реальных устройствах и передача исходного кода. Средняя экономия бюджета на разработку такого функционала составляет 30% по сравнению с покупкой готового API-решения. Стоимость рассчитывается индивидуально после брифа.
Срок: от 0.5 до 2 дней в зависимости от сложности (логотип, цвет, несколько форматов). Мы гарантируем, что сгенерированные QR-коды проходят все тесты сканирования (ZXing, iPhone, Google Lens) и соответствуют стандартам ISO/IEC 18004.
Почему стоит выбрать нас?
- 5 лет на рынке разработки веб-приложений.
- Более 50 успешно внедрённых проектов с QR-функционалом.
- Опыт работы с Core Web Vitals: наши решения не увеличивают LCP и CLS.
- Поддержка после сдачи — исправляем баги в течение 24 часов.
Если нужно быстро и без компромиссов получить рабочий генератор QR-кодов — свяжитесь с нами. Расскажите о задаче, и мы предложим оптимальное решение. Закажите внедрение уже сегодня.