Катопульта

Контекст и задача

Многим малым бизнесам нужны не одна-две картинки, а десятки однотипных: карточки меню для кафе, ценники для пекарни, посты для соцсетей с единым стилем, карточки товаров для каталога, афиши под каждое событие. Делать каждую вручную в графическом редакторе - долго; использовать сложные профессиональные инструменты - дорого и тяжело. Существующие онлайн-сервисы часто требуют регистрации, хранят проекты на своих серверах и привязывают пользователя к себе. Катопульта предлагает принципиально новый формат.

Задача состояла в том, чтобы построить редактор, в котором можно нарисовать макет один раз, отметить заменяемые элементы и генерировать картинки, подставляя разные данные. При этом сервис должен быть бесплатным, не требовать регистрации, хранить файлы у пользователя. Немаловажно, чтобы сервис не использовал серверные вычисления, чтобы сервис мог оставаться бесплатным.

Решение

Катопульта - браузерный шаблонизатор изображений, работающий по простому сценарию из трёх шагов. Нарисуйте макет в редакторе, отметьте заменяемые элементы (текст и картинки, которые будут меняться: названия, цены, логотипы, фото), подставляйте разные данные и экспортируйте готовые PNG. Один шаблон - десятки и сотни результатов.

• Без установки - работает прямо в браузере
• Без аккаунта - можно начать сразу, без регистрации
• Безопасно - данные хранятся в браузере, никуда не уходят
• Оптимизация - все доступные мощности вашего устройства используются для рендеринга картинок
• Файлы ваши - вы всегда можете скачать .och файл из браузера и сохранить у себя

Что умеет редактор

Редактор Катопульты это полноценный графический инструмент: холст, тулбар, панель слоёв и панель свойств - всё под рукой, в тёмной теме. Набора инструментов достаточно для создания почти любого макета, без лишних функций.

• Фигуры, изображения, текст - прямоугольники со скруглёнными углами, эллипсы, картинки с режимами fill/contain/cover и текстовые блоки
• Градиенты и тени - многослойные линейные и радиальные градиенты, сложные тени
• Свои шрифты - загрузка TTF, OTF или WOFF2; шрифт встраивается в файл .och, и шаблон одинаково отображается на любом устройстве
• Группы и автоформатирование - объединение элементов в группы и автоматическая раскладка через Поток: автоматическое выравнивание по горизонтали или вертикали с расстоянием
• Прилипания - по девяти точкам при перемещении, привязка краёв при изменении размеров, ограничение по оси через Shift с адаптивными направляющими
• Экспорт PNG - рендеринг идёт в Web Worker, поэтому интерфейс не подвисает, а картинки генерируются за секунды

Формат .och и архитектура

Катопульта - это фронтенд инструмент, поставляющийся в виде сайта. Ключевое техническое решение - формат .och. Шаблон сохраняется в бинарный файл на базе Kiwi-схемы с gzip-сжатием. В один файл встроены и дизайн, и оригиналы картинок, и шрифты, и превью-эскиз для отображения в галерее. Файл не зашифрован и его можно открыть везде, где реализован кодек файлов .och. Если вы скачали файл - он ваша собственность и никто его у вас не отнимет.

Где это полезно

Катопульта решает задачи там, где обычно нужна не одна картинка, а десятки однотипных с разными данными. Каждый сценарий покрывается одним шаблоном.

• Меню и ценники - один шаблон карточки, сотни позиций с разными названиями и ценами для кафе, пекарни, магазина
• Посты для соцсетей - серия постов с единым стилем: меняются заголовок, фото и фон, сохраняется единый визуальный язык
• Карточки товаров - каталоги и витрины: один макет под разные товары, фото и характеристики, быстро и единообразно
• Афиши и баннеры - шаблон с заменяемой датой, местом и изображением, генерация вариантов под каждое событие

Результаты и подход

Катопульта развивается наш собственный проект - бесплатно и на пожертвования. Открытый бинарный формат .och - это филосовское заявление: инструменты должны работать на пользователей, а не запирать их данные внутри себя. Шрифты и картинки внутри одного файла, превью-эскиз для галереи, компактность даже с изображениями - всё подчинено идеи переносимости и независимости.

Нарисуйте макет один раз, отметьте заменяемые элементы и создавайте изображения для меню, ценников, постов и карточек. Бесплатно, без регистрации, прямо в браузере.

Миссия проекта заключается в том, что бесплатный инструмент может быть функциональным, не уступая платным аналогам. Web Worker и OffscreenCanvas дают высокую производительность; Kiwi-схема с gzip - компактный переносимый формат. Современный веб-стек позволяет строить серьёзные инструменты, которые работают целиком на клиенте и не требуют серверной инфраструктуры для хранения данных.