Реалізація QR-генератора на сайті

Реалізація генератора QR-кодів

QR-код потрібний у особистих кабінетах (посилання на профіль), системах оплати (QR для переводу), електронних квитках, візитках та маркетингових інструментах. Генерація в браузері без запитів до сервера — швидко і без залежності від зовнішніх сервісів.

Бібліотека qrcode

qrcode — надійна бібліотека з підтримкою 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>
  )
}

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 та друкованих матеріалів.

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')
}

Серверна генерація (Node.js)

Коли QR потрібно вставити в PDF або відправити в листі:

import QRCode from 'qrcode'

// Express / Next.js API маршрут
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',
    },
  })
}

Що ми робимо

Інтегруємо генератор QR-кодів у потрібне місце (форма, карточка товара, особистий кабінет), налаштовуємо розмір, колір, рівень корекції помилок, за потреби додаємо логотип та завантаження у PNG/SVG.

Тривалість: 0.5 дня.