Реалізація Signature Pad (електронний підпис) на сайті

Реалізація Signature Pad (електронний підпис) на сайті

Ми часто стикаємося із завданнями, де потрібно зібрати підпис клієнта прямо в браузері: договори, заяви, медичні форми. На одному з проєктів підписи на iPad виглядали розмитими через відсутність підтримки HiDPI. Після налаштування параметрів canvas якість стала прийнятною. Використовуємо бібліотеку signature_pad (8 КБ) з тонким налаштуванням velocityFilterWeight і підтримкою touch. В одному проєкті вдалося досягнути 60 FPS при малюванні стилусом на iPad Pro. Реалізація Signature Pad — це не просто вставка canvas, а цілий ряд технічних рішень: згладжування, HiDPI, експорт, інтеграція з PDF. Наш досвід — 5+ років і 30+ проєктів — гарантує, що підпис працюватиме на будь-яких пристроях. Економія на розробці з нуля — до 3 днів, а вартість інтеграції окупається за 1 місяць економії часу. Близько 30% користувачів заповнюють документи з мобільних пристроїв, тому адаптація під retina-екрани критична.

Типові проблеми при реалізації електронного підпису

• Розмиті підписи на HiDPI-екранах — canvas за замовчуванням рендериться в низькому розділенні. Рішення: масштабування canvas з урахуванням devicePixelRatio.
• Нерівномірне згладжування штрихів — при повільному малюванні лінія стає товстою. Налаштування velocityFilterWeight і throttle виправляє ситуацію.
• Пустий підпис при сабміті — часто забувають перевіряти isEmpty(). Валідація на клієнті та сервері обов’язкова.
• Експорт з неправильним фоном — фон PNG має бути прозорим для коректного накладання на PDF. Використовуйте toDataURL('image/png') з прозорістю.
• Несумісність з браузерами без Pointer Events — fallback на mouse/touch події.

Як вибрати бібліотеку: signature_pad vs аналоги

Бібліотека signature_pad від Szimek — мінімалістичне рішення (8 КБ), що працює поверх <canvas>. Підтримує Pointer Events, touch, стилус з тиском, експорт у PNG/SVG/JPEG. Аналоги: jSignature (тільки jQuery), SignaturePad (кутастий). Наш вибір — signature_pad за продуктивність і гнучкість.

Параметри згладжування підписів

Чому SVG кращий за PNG для підписів?

SVG — векторний формат, масштабується без втрати якості, важить у 2–3 рази менше за PNG. Його можна вставити прямо в PDF без перекодування. Бібліотека pdf-lib дозволяє працювати з SVG через пакет svg2pdf. PNG — растровий, але сумісний зі старими системами. Якщо бекенд підтримує SVG, вибирайте його: економія на зберіганні та передачі складе до 60%.

Як ми вирішуємо проблему HiDPI?

Canvas за замовчуванням рендериться з розділенням 1:1. Для чіткого підпису на retina-екранах необхідно збільшити розмір canvas у devicePixelRatio разів і масштабувати контекст. Приклад налаштування:

const canvas = canvasRef.current!
const ctx = canvas.getContext('2d')!
const dpr = window.devicePixelRatio || 1

canvas.width = canvas.offsetWidth * dpr
canvas.height = canvas.offsetHeight * dpr
ctx.scale(dpr, dpr)

Без цього налаштування підпис буде розмитим на пристроях з DPR > 1.

Як ми реалізуємо Signature Pad: процес і гарантії

1. Аналіз вимог: тип підпису (миша/стилус), формат експорту, інтеграція з формою.
2. Налаштування бібліотеки: згладжування, HiDPI, колір пера.
3. Реалізація UI: кнопки очищення, скасування, збереження.
4. Експорт і вставка: генерація SVG/PNG, вбудовування в PDF через pdf-lib.
5. Тестування: на мобільних пристроях, планшетах, сенсорних екранах.
6. Деплой і документація.

Гарантуємо стабільну роботу і підтримку після впровадження. Зв'яжіться з нами — оцінимо ваш проєкт за 1 день безкоштовно. Економія на папері та логістиці з електронним підписом може досягати 70%.

// Node.js, библиотека pdf-lib
import { PDFDocument } from 'pdf-lib'

async function embedSignatureInPdf(
  pdfBytes: Uint8Array,
  signatureDataUrl: string,
  page: number = 0
): Promise<Uint8Array> {
  const pdfDoc = await PDFDocument.load(pdfBytes)
  const pages = pdfDoc.getPages()
  const targetPage = pages[page]

  const signatureBase64 = signatureDataUrl.replace(/^data:image\/png;base64,/, '')
  const signatureBytes = Buffer.from(signatureBase64, 'base64')
  const signatureImage = await pdfDoc.embedPng(signatureBytes)

  const { width, height } = signatureImage.scale(0.5)

  targetPage.drawImage(signatureImage, {
    x: 60,
    y: 60,
    width,
    height,
    opacity: 1,
  })

  return pdfDoc.save()
}

Що входить в реалізацію Signature Pad?

• Встановлення та налаштування signature_pad
• Підтримка HiDPI та touch-пристроїв
• Експорт у PNG/SVG та вставка в PDF
• Інтеграція з формою (React Hook Form, Vue Form, нативна)
• Валідація підпису (не пустий, мінімальна довжина)
• Документація та навчання команди
• Вихідний код та інструкція з розгортання

Базова реалізація

import SignaturePad from 'signature_pad'
import { useEffect, useRef, useCallback } from 'react'

interface SignaturePadProps {
  onSave: (dataUrl: string) => void
  width?: number
  height?: number
}

export function SignatureCanvas({ onSave, width = 500, height = 200 }: SignaturePadProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const padRef = useRef<SignaturePad | null>(null)

  useEffect(() => {
    const canvas = canvasRef.current!
    padRef.current = new SignaturePad(canvas, {
      minWidth: 0.5,
      maxWidth: 2.5,
      penColor: '#1e293b',
      backgroundColor: 'rgb(255,255,255)',
      throttle: 16, // ms между точками
    })

    // HiDPI поддержка
    function resizeCanvas() {
      const ratio = Math.max(window.devicePixelRatio || 1, 1)
      canvas.width = canvas.offsetWidth * ratio
      canvas.height = canvas.offsetHeight * ratio
      canvas.getContext('2d')!.scale(ratio, ratio)
      padRef.current!.clear()
    }

    resizeCanvas()
    window.addEventListener('resize', resizeCanvas)
    return () => {
      window.removeEventListener('resize', resizeCanvas)
      padRef.current!.off()
    }
  }, [])

  const handleSave = useCallback(() => {
    if (!padRef.current) return
    if (padRef.current.isEmpty()) {
      alert('Будь ласка, поставте підпис')
      return
    }
    // PNG с прозрачным фоном
    const dataUrl = padRef.current.toDataURL('image/png')
    onSave(dataUrl)
  }, [onSave])

  const handleClear = useCallback(() => {
    padRef.current?.clear()
  }, [])

  const handleUndo = useCallback(() => {
    const data = padRef.current?.toData()
    if (data && data.length > 0) {
      data.pop() // Удаляем последний штрих
      padRef.current?.fromData(data)
    }
  }, [])

  return (
    <div className="border rounded-lg overflow-hidden">
      <canvas
        ref={canvasRef}
        style={{ width, height, touchAction: 'none' }}
        className="block w-full"
      />
      <div className="flex justify-between p-2 bg-gray-50 border-t">
        <div className="flex gap-2">
          <button
            type="button"
            onClick={handleUndo}
            className="text-sm text-gray-600 hover:text-gray-900"
          >
            Скасувати штрих
          </button>
          <button
            type="button"
            onClick={handleClear}
            className="text-sm text-red-500 hover:text-red-700"
          >
            Очистити
          </button>
        </div>
        <button
          type="button"
          onClick={handleSave}
          className="px-4 py-1 bg-blue-600 text-white rounded text-sm"
        >
          Застосувати підпис
        </button>
      </div>
    </div>
  )
}

Експорт у SVG

SVG кращий за PNG для підписів — масштабується без втрати якості, менше важить, можна вставити прямо в PDF:

const svgData = padRef.current.toSVG()
// <svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>

// Або через Blob для збереження файлу
const blob = new Blob([svgData], { type: 'image/svg+xml' })
const url = URL.createObjectURL(blob)

Інтеграція з React Hook Form

import { Controller } from 'react-hook-form'

function ContractForm() {
  const { control, handleSubmit } = useForm<{
    name: string
    signature: string
  }>()

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="signature"
        rules={{ required: 'Підпис обов\'язковий' }}
        render={({ field, fieldState }) => (
          <div>
            <SignatureCanvas
              onSave={(dataUrl) => field.onChange(dataUrl)}
              width={500}
              height={180}
            />
            {fieldState.error && (
              <p className="text-red-500 text-sm mt-1">{fieldState.error.message}</p>
            )}
          </div>
        )}
      />
      <button type="submit">Підписати договір</button>
    </form>
  )
}

Терміни та вартість

Базова інтеграція: 0.5–1 день. З кастомізацією (згладжування, HiDPI, PDF): 1–3 дні. Вартість розраховується індивідуально. Економія на папері та печатці з підписом у PDF — до 70%. Отримайте консультацію з інтеграції електронного підпису — ми підберемо оптимальне рішення під ваш стек і бюджет.

signature_pad GitHub, pdf-lib.

Фронтенд-розробка React: від аудиту до production

Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.

Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.

Чому Next.js — стандартний вибір для SEO?

React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.

Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.

Як TypeScript запобігає багам у продакшені?

TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.

Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.

Vue 3 + Nuxt 3 — альтернативний стек для SSR

Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.

Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.

Продуктивність: метрики та інструменти

Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.

Динамічні імпорти для важких компонентів:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.

Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.

State management: без овериніжирингу

Для більшості додатків достатньо:

• React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
• Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
• React Hook Form — для форм

Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.

CSS та дизайн-система

Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки. React DevTools Profiler — офіційний інструмент від команди React.

Тестування

E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.

Орієнтири за термінами та складом робіт

Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.

Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.

У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.

Який стек обрати для фронтенд-розробки React?

Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.

Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.