Как реализовать захват подписи клиента на планшете и её печать на мобильном чековом принтере в 1С

Программист 1С v8.3 (Управляемые формы) 1С:Розница Торговля и дистрибуция
← На главную

В современной автоматизации розничной торговли и служб доставки часто возникает задача получения физического подтверждения операции от клиента. Одним из таких способов является визуализация подписи клиента прямо на чеке мобильного принтера — для этого подойдёт программный вывод изображений подписей в печатные формы. Рассмотрим подробно, как реализовать этот процесс в среде 1С, учитывая использование веб-клиента и мобильных устройств.

Процесс можно разделить на три ключевых этапа: захват графической информации на устройстве (планшете), передача данных в информационную базу и программная подготовка изображения для термопечати — в этом поможет автоматическая подстановка графических подписей в печатные формы.

Этап 1: Захват подписи клиента через веб-интерфейс

Поскольку работа ведется в веб-приложении на платформе 8.3.13, наиболее эффективным способом организовать поле для рисования является использование Поля HTML-документа. Мы не можем просто использовать стандартные элементы управления 1С для «рисования» пальцем, поэтому воспользуемся мощью HTML5 и JavaScript.

Проанализируем технологию: мы внедрим в форму 1С библиотеку (например, Signature Pad), которая позволяет отслеживать движения стилуса или пальца по экрану. Результатом работы этой библиотеки будет строка в формате Base64, представляющая собой изображение подписи.

Разберем примерный алгоритм подготовки HTML-содержимого:

  1. Создаем строковую переменную, содержащую HTML-код с тегом canvas.
  2. Добавляем скрипт, который инициализирует область рисования и предоставляет функцию для выгрузки изображения.
  3. В коде 1С по нажатию кнопки «Готово» вызываем JavaScript-функцию, которая возвращает данные обратно в 1С.

Посмотрим на пример кода JavaScript для получения данных:


function getSignatureData() {
    var canvas = document.getElementById('signature-pad');
    // Получаем изображение в формате PNG Base64
    return canvas.toDataURL('image/png');
}

Этап 2: Обработка изображения в 1С

После того как мы получили строку Base64 из веб-части, нам необходимо превратить её в объект, с которым может работать драйвер принтера. В 1С для этого используется объект Картинка.

Рассмотрим по шагам процесс конвертации:


// Очищаем строку от префикса (data:image/png;base64,)
ЧистаяСтрокаBase64 = СтрЗаменить(ДанныеИзJS, "data:image/png;base64,", "");
// Преобразуем в двоичные данные
ДвоичныеДанныеКартинки = Base64Значение(ЧистаяСтрокаBase64);
// Создаем объект Картинка
ПодписьКлиента = Новый Картинка(ДвоичныеДанныеКартинки);

Важный нюанс: Термопринтеры (как мобильные, так и стационарные ККТ) обладают специфической особенностью — они не умеют печатать цвета или оттенки серого. Печать осуществляется методом нагрева определенных точек (черный цвет) или отсутствием нагрева (белый фон). Поэтому, прежде чем отправлять подпись на печать, проанализируем необходимость её подготовки.

Изображение должно быть переведено в монохромный режим (1 бит на пиксель). Если отправить полноцветный PNG, драйвер принтера может попытаться применить алгоритм дизеринга (рассеивания точек), что превратит подпись в неразборчивое «облако» точек. Рекомендуется программно повысить контрастность и перевести изображение в черно-белый вид перед печатью.

Этап 3: Печать на мобильном принтере

Выясним, как взаимодействовать с принтером. Мобильные принтеры чаще всего подключаются по Bluetooth или Wi-Fi и работают по протоколу ESC/POS. В случае использования 1С:Розница, мы обычно работаем через драйверы торгового оборудования (АТОЛ, Штрих-М и др.).

Если используется современный драйвер АТОЛ 10-й версии, задача упрощается — для этого подойдёт драйвер АТОЛ 10-й версии для работы онлайн-касс. Рассмотрим метод печати через JSON-задание, который стал стандартом в последних версиях платформы. Драйвер АТОЛ 10 позволяет передавать картинку напрямую в массиве байтов или через путь к файлу.

Пример структуры задания для печати графики (в упрощенном виде):


{
    "type": "printImage",
    "filePath": "C:\\Temp\\signature.bmp",
    "alignment": "center",
    "scale": "fit"
}

Проанализируем ситуацию с шириной ленты. Стандартные мобильные принтеры имеют ширину ленты 58 мм (384 точки печати) или 80 мм (576 точек). Перед выводом на печать важно программно изменить размер полученной подписи так, чтобы она не превышала ширину области печати, иначе изображение будет обрезано.

Работа в веб-клиенте и мобильном клиенте

При использовании веб-клиента в браузере возникают ограничения безопасности. Прямой доступ к портам устройства (USB или Bluetooth) из браузера закрыт — для этого подойдёт инструмент дистанционной печати на онлайн-кассах из веб-клиента. Для решения этой задачи существует два пути:

  1. Использование расширения для работы с файловой системой: 1С сохраняет картинку во временный файл, а внешняя компонента драйвера принтера считывает этот файл и отправляет на устройство.
  2. Использование Мобильного клиента 1С: Если запускать приложение не в браузере, а через специальное приложение «1С:Мобильный клиент», то платформа получает полный доступ к Bluetooth-стеку устройства, что делает печать «закорючки» гораздо более стабильной.

Юридические и практические советы

Хотя автор темы указал, что юридическая сторона его не касается, для качественной реализации системы следует помнить: графический образ подписи сам по себе не является квалифицированной электронной подписью (поможет сервис дистанционного подписания документов клиентом). Однако, чтобы усилить легитимность такого документа, рекомендуем вместе с картинкой подписи сохранять в базе 1С дополнительные метаданные:

Это позволит в будущем идентифицировать, что подпись была поставлена в конкретное время в конкретном месте.

Подводя итог, скажем: реализация печати подписи — это связка из HTML5-формы для ввода данных, обработки полученного Base64 в 1С и использования методов печати растровых изображений драйверов ККТ. Наиболее перспективным направлением здесь является использование драйверов версии 10 и выше, поддерживающих прямую печать графики без сложного ручного кодирования каждого пикселя в команды принтера.

← На главную