Класс Canvas предоставляет инструмент для создания и управления HTML5 <canvas> с целью извлечения собственноручной подписи пользователя. Основное предназначение класса — упрощение работы с холстом для сбора подписи, её валидации и экспорта в формате base64.

Remarks

  • Автоматически создаёт элемент <canvas> внутри указанного контейнера и подстраивает его размеры.
  • Обеспечивает корректную работу с мышью и тач-устройствами для рисования подписи.
  • Включает утилиты для очистки холста и извлечения подписи.
  • Сохраняет содержимое при изменении размеров контейнера.
  • Отключает прокрутку при касаниях через touchAction: none.

Example

Пример использования для извлечения подписи пайщика:

import { Classes } from '@coopenomics/sdk'

// Указываем контейнер, где будет размещён холст
const container = document.getElementById('signature-container') as HTMLElement

// Создаём экземпляр Canvas для работы с подписью
const signatureCanvas = new Classes.Canvas(container, {
lineWidth: 5,
strokeStyle: '#000',
})

// Очистка холста при необходимости
signatureCanvas.clearCanvas()

// Извлечение подписи в формате base64
const signature = signatureCanvas.getSignature()
console.log('Подпись в формате base64:', signature)

// Освобождение ресурсов, если холст больше не нужен
signatureCanvas.destroy()

Constructors

Properties

Methods

Constructors

  • Создаёт экземпляр класса Canvas и подготавливает холст для рисования подписи.

    Parameters

    • container: HTMLElement

      HTML-элемент, внутри которого создаётся <canvas>.

    • opts: {
          lineWidth?: number;
          strokeStyle?: string;
      } = {}

      Настройки:

      • lineWidth - Толщина линии для рисования (по умолчанию 5).
      • strokeStyle - Цвет линии для рисования (по умолчанию чёрный, #000).
      • Optional lineWidth?: number
      • Optional strokeStyle?: string

    Returns Canvas

Properties

canvas: HTMLCanvasElement
ctx: CanvasRenderingContext2D

Methods

  • Возвращает содержимое холста (подпись) в формате base64 (PNG).

    Returns string

    Подпись в формате base64.