Реализация 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 дня. Стоимость от 15 000 ₽, рассчитывается индивидуально. Экономия на бумаге и печати с подписью в PDF — до 70%. Получите консультацию по интеграции электронной подписи — мы подберём оптимальное решение под ваш стек и бюджет.

signature_pad GitHub, pdf-lib.