Реализация 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 за производительность и гибкость.
| Характеристика | signature_pad | jSignature | SignaturePad |
|---|---|---|---|
| Размер | 8 КБ | 15 КБ | 12 КБ |
| Touch | Да | Да | Да |
| Экспорт SVG | Да | Нет | Да |
| Поддержка React | Нативная | Через обёртку | Через обёртку |
| HiDPI | Да (ручная настройка) | Нет | Нет |
Параметры сглаживания подписей
| Параметр | Значение по умолчанию | Рекомендация |
|---|---|---|
minWidth |
0.5 | Меньше — тоньше линия при быстром движении |
maxWidth |
2.5 | Больше — толще линия при медленном |
throttle |
16 | ms между точками; меньше — плавнее, но больше точек |
velocityFilterWeight |
0.7 | Вес фильтра скорости; 0 — отключён |
Почему 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: процесс и гарантии
- Анализ требований: тип подписи (мышь/стилус), формат экспорта, интеграция с формой.
- Настройка библиотеки: сглаживание, HiDPI, цвет пера.
- Реализация UI: кнопки очистки, отмены, сохранения.
- Экспорт и вставка: генерация SVG/PNG, встраивание в PDF через
pdf-lib. - Тестирование: на мобильных устройствах, планшетах, сенсорных экранах.
- Деплой и документация.
Гарантируем стабильную работу и поддержку после внедрения. Свяжитесь с нами — оценим ваш проект за 1 день бесплатно. Экономия на бумаге и логистике с электронной подписью достигает 70%.
Пример интеграции с PDF (Node.js)
// 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 дня. Стоимость от 15 000 ₽, рассчитывается индивидуально. Экономия на бумаге и печати с подписью в PDF — до 70%. Получите консультацию по интеграции электронной подписи — мы подберём оптимальное решение под ваш стек и бюджет.