Як розробити форму з підписом без помилок та юридичних ризиків?
Кур'єр простягає планшет клієнту для підпису — і підпис розмитий через HiDPI. Або сторінка скролиться замість малювання. Такі помилки не просто неприємні: вони підривають довіру та можуть призвести до юридичних спорів. Наприклад, при підписанні договору страхування через мобільний додаток кожен штрих має бути зафіксований з точністю до пікселя. Наша команда має 7+ років досвіду в розробці веб-форм для фінтех- та правових проєктів. Ми вирішуємо ці проблеми на рівні архітектури: від обробки touch-подій до зберігання метаданих. Наш підхід гарантує чіткість на будь-яких дисплеях, коректну поведінку на мобільних пристроях та юридичну значущість кожного підпису.
Які проблеми вирішує грамотна реалізація поля підпису?
Проблема 1: HiDPI та чіткість
На дисплеях Retina підпис на canvas без урахування devicePixelRatio буде розмитим. Рішення — масштабувати canvas відповідно до ratio. Це знижує навантаження на зір користувача та покращує сприйняття. Типова економія трафіку при використанні векторизованого зберігання сягає 80%.
Проблема 2: Скрол замість малювання на мобільних
Без touch-action: none на canvas сторінка прокручується. Ми блокуємо скрол лише при активному малюванні — решту часу поведінка штатна.
Проблема 3: Вибір формату зберігання
PNG — універсальний, але займає багато місця і не масштабується. SVG — векторний, але редагований. JSON з точками — мінімальний розмір (в середньому 2–5 КБ) і можливість відновлення в будь-якій роздільній здатності. Для юридично значущих документів ми рекомендуємо JSON + метадані.
Проблема 4: Юридична значущість
Проста картинка не доводить, що підписав саме той чоловік. Ми зберігаємо ланцюжок: часова мітка, IP, user-agent, хеш документа. Це визнається в судах як просте електронне підписання.
Як ми це робимо: стек та підхід
Ми використовуємо бібліотеку signature_pad (MIT, ~4 KB gzip) для малювання та експорту. Вона згладжує криві Безьє та підтримує SVG. Для PDF застосовуємо pdf-lib — працює і в браузері, і на сервері.
Кейс: для фінтех-проєкту ми обрали зберігання точок + метаданих у PostgreSQL. При завантаженні сторінки підпис відновлюється через pad.fromData(). PDF генерується на сервері — це безпечніше та швидше, ніж на клієнті. Результат — юридично значущий документ з прив'язкою до сесії.
Чому canvas — основа для поля підпису?
Canvas — єдиний API браузера, що дозволяє малювати з піксельною точністю. Альтернативи поступаються: SVG в 10 разів повільніший при обробці кожного штриха, а CSS-елементи непридатні для рукописного введення. Canvas дає повний контроль і легко інтегрується з експортом.
Формати зберігання підпису
| Формат | Розмір | Масштабованість | Юридична значущість |
|---|---|---|---|
| PNG (base64) | Середній | Ні (пікселі) | Низька (можна замінити) |
| SVG | Малий | Так (вектор) | Середня (легко редагувати) |
| JSON (точки) | Дуже малий (2–5 КБ) | Так (рендеринг у будь-якій роздільній здатності) | Висока (відновлює процес малювання) |
| PDF (вбудований) | Залежить від документа | Так | Висока (якщо з метаданими) |
Процес роботи
- Аналіз вимог — пристрої, браузери, юридичні норми, необхідні формати.
- Проєктування архітектури — вибір сховища, бібліотек, спосіб генерації PDF.
- Розробка компонента — налаштування canvas, обробка подій, HiDPI, блокування скролу.
- Інтеграція з бекендом — API для збереження/завантаження підпису, генерація PDF на сервері.
- Тестування — на реальних пристроях (iOS/Android, десктоп), перевірка юридичного ланцюжка.
- Деплой та документація — CI/CD, README з прикладами виклику.
| Етап | Тривалість | Опис |
|---|---|---|
| Аналіз | 1 день | Вимоги, пристрої, юридичні норми |
| Проєктування | 1 день | Архітектура, вибір бібліотек |
| Розробка | 2–3 дні | Код, інтеграція canvas, PDF |
| Тестування | 1 день | На пристроях, регресія |
| Документація | 0.5 дня | API, інструкції |
Що входить у результат
- Готовий компонент поля підпису з налаштуванням кольору, товщини, фону.
- Експорт у PNG, SVG, JSON (за вибором) — економія місця до 80% при зберіганні точок.
- Відновлення підпису з JSON у будь-якій роздільній здатності.
- Інтеграція з PDF-генерацією (pdf-lib) з метаданими.
- API-документація та приклади використання.
- Підтримка протягом місяця після здачі.
Технічні деталі реалізації
- Скидання контексту: при кожному малюванні очищаємо canvas і перемальовуємо всі збережені точки.
- Обробка touch-подій: використовуємо pointer events для уніфікації миші та тачскрину.
- HiDPI: множимо розмір canvas на window.devicePixelRatio та масштабуємо контекст.
- Блокування скролу: встановлюємо CSS touch-action: none на canvas та відключаємо при завершенні малювання.
Типові помилки при реалізації (та як їх уникнути)
- Забути про HiDPI — підпис розмитий. Рішення: використовувати devicePixelRatio.
- Не блокувати скрол — сторінка їде. Рішення: touch-action: none на canvas.
- Зберігати лише PNG — втрата масштабованості та юридичної сили. Рішення: зберігати JSON + метадані.
- Генерувати PDF на клієнті — проблеми з безпекою та розміром. Рішення: серверна генерація через pdf-lib.
Зв'яжіться з нами для оцінки вашого завдання — ми проаналізуємо вимоги та запропонуємо оптимальне рішення. Замовте розробку під ключ: від прототипу до деплою з гарантією якості.
Докладніше про Canvas API та бібліотеку signature_pad.