Публикация была переведена автоматически. Исходный язык: Русский
В жизни любого backend-разработчика наступает момент, когда стандартных полей ввода и загрузчиков картинок становится недостаточно. Особенно если вы делаете проект для детей — яркий, динамичный сайт, где визуальный контент играет главную роль.
Однажды передо мной встала нетривиальная задача: дать администраторам сайта возможность создавать красочные информационные буклеты прямо внутри админ-панели. Без Photoshop, без привлечения дизайнера для каждой правки опечатки и без сложной верстки на стороне клиента.
В этой статье я расскажу, как мы подружили Fabric.js, Yii2 и PostgreSQL, создав конвейер по производству графики «на лету».
Изначально процесс выглядел классически: дизайнер рисовал макет буклета, верстальщик или контент-менеджер нарезал это в картинку, и мы заливали готовый PNG на сайт.
Нам нужен был инструмент, который позволил бы редактору зайти в админку, открыть шаблон, поменять текст или картинку, нажать «Сохранить» — и всё сразу улетало бы на фронтенд.
Для реализации графического редактора в браузере выбор практически сразу пал на Fabric.js. Работа с чистым HTML5 Canvas API — это боль, когда речь заходит об интерактивности.
Fabric.js дает нам объектную модель поверх холста. Вместо того чтобы оперировать пикселями, мы оперируем объектами: «Текстовое поле», «Прямоугольник», «Изображение». Это позволяло реализовать ключевые фичи «из коробки»:
- Перетаскивание (Drag & Drop).
- Масштабирование и поворот элементов.
- Группировка объектов.
- Слои (поднять выше/опустить ниже).
Связка технологий выглядела так:
- Backend: Yii2 (надежный, проверенный временем фреймворк для админок и API).
- Database: PostgreSQL.
Самый интересный архитектурный момент — это то, как мы храним эти буклеты. Нам нужно было убить двух зайцев:
- Буклет должен быть редактируемым в будущем (нужно хранить слои, тексты, настройки шрифтов).
- На сайте буклет должен отдаваться как обычная легкая картинка (PNG), чтобы не нагружать браузеры детей и родителей рендерингом канваса.
Поэтому процесс сохранения работал в два потока.
Когда редактор нажимает «Сохранить», Fabric.js сериализует всё, что происходит на холсте, в формат JSON. В этом JSON хранится всё: координаты каждого котика, цвет каждого заголовка, угол поворота солнышка. Этот огромный JSON-объект мы отправляем в Yii2 и кладем в PostgreSQL в поле типа jsonb.
Зачем это нужно? Когда редактор вернется через неделю, чтобы поменять дату, мы достанем этот JSON из базы, скормим его Fabric.js, и он восстановит холст в точности таким, каким он был при закрытии.
Одновременно с генерацией JSON, мы просим Fabric.js сделать «снэпшот» холста. Библиотека генерирует изображение в формате PNG и загружает его на наш файловый сервер и базу сохраняет путь
Фронтенд (публичная часть сайта) вообще не знает о существовании сложного редактора или Fabric.js. Когда Yii2 отдает данные для страницы, он просто подставляет ссылку на сгенерированный PNG.
Для пользователя это выглядит как обычная картинка. Но для бизнеса это картинка, которую можно изменить за 30 секунд без участия дизайнера.
Конечно, без трудностей не обошлось. Вот с чем придется столкнуться, если решите повторить этот опыт:
Чтобы текст на картинке выглядел красиво, нужны нестандартные детские шрифты. Но Fabric.js отрисовывает текст на канвасе, только если шрифт уже загружен браузером. Пришлось реализовать предзагрузчик шрифтов в админке. Пока шрифт не загрузится физически, редактор не инициализировался, иначе текст «схлопывался» в стандартный Times New Roman.
Админка позволяет загружать свои картинки (например, логотипы спонсоров) на буклет. Если эти картинки тянулись с другого домена без правильных заголовков, браузер помечал холст как «tainted» (загрязненный) и запрещал экспорт в PNG из соображений безопасности. Пришлось тонко настраивать заголовки Cross-Origin на файловом сервере.
По умолчанию канвас рендерится в разрешении 1:1. На современных телефонах такие буклеты выглядели мыльными. Мы внедрили множитель масштаба при экспорте. В редакторе холст может быть 800px по ширине, но при генерации PNG мы умножали масштаб на 2 или 3, получая четкую картинку высокого разрешения, готовую к печати или просмотру на iPhone.
Вместо сложной цепочки «Заказчик -> Дизайнер -> Верстальщик -> Деплой» мы получили элегантный цикл:
Редактор открыл админку -> Подвигал объекты -> Нажал "Сохранить" -> Профит!
Yii2 надежно хранит историю и управляет файлами, PostgreSQL держит структуру, а Fabric.js берет на себя всю визуальную магию. А главное — дети видят красивые анонсы вовремя, а разработчики могут заниматься кодом, а не заменой картинок по пятницам вечером.
В жизни любого backend-разработчика наступает момент, когда стандартных полей ввода и загрузчиков картинок становится недостаточно. Особенно если вы делаете проект для детей — яркий, динамичный сайт, где визуальный контент играет главную роль.
Однажды передо мной встала нетривиальная задача: дать администраторам сайта возможность создавать красочные информационные буклеты прямо внутри админ-панели. Без Photoshop, без привлечения дизайнера для каждой правки опечатки и без сложной верстки на стороне клиента.
В этой статье я расскажу, как мы подружили Fabric.js, Yii2 и PostgreSQL, создав конвейер по производству графики «на лету».
Изначально процесс выглядел классически: дизайнер рисовал макет буклета, верстальщик или контент-менеджер нарезал это в картинку, и мы заливали готовый PNG на сайт.
Нам нужен был инструмент, который позволил бы редактору зайти в админку, открыть шаблон, поменять текст или картинку, нажать «Сохранить» — и всё сразу улетало бы на фронтенд.
Для реализации графического редактора в браузере выбор практически сразу пал на Fabric.js. Работа с чистым HTML5 Canvas API — это боль, когда речь заходит об интерактивности.
Fabric.js дает нам объектную модель поверх холста. Вместо того чтобы оперировать пикселями, мы оперируем объектами: «Текстовое поле», «Прямоугольник», «Изображение». Это позволяло реализовать ключевые фичи «из коробки»:
- Перетаскивание (Drag & Drop).
- Масштабирование и поворот элементов.
- Группировка объектов.
- Слои (поднять выше/опустить ниже).
Связка технологий выглядела так:
- Backend: Yii2 (надежный, проверенный временем фреймворк для админок и API).
- Database: PostgreSQL.
Самый интересный архитектурный момент — это то, как мы храним эти буклеты. Нам нужно было убить двух зайцев:
- Буклет должен быть редактируемым в будущем (нужно хранить слои, тексты, настройки шрифтов).
- На сайте буклет должен отдаваться как обычная легкая картинка (PNG), чтобы не нагружать браузеры детей и родителей рендерингом канваса.
Поэтому процесс сохранения работал в два потока.
Когда редактор нажимает «Сохранить», Fabric.js сериализует всё, что происходит на холсте, в формат JSON. В этом JSON хранится всё: координаты каждого котика, цвет каждого заголовка, угол поворота солнышка. Этот огромный JSON-объект мы отправляем в Yii2 и кладем в PostgreSQL в поле типа jsonb.
Зачем это нужно? Когда редактор вернется через неделю, чтобы поменять дату, мы достанем этот JSON из базы, скормим его Fabric.js, и он восстановит холст в точности таким, каким он был при закрытии.
Одновременно с генерацией JSON, мы просим Fabric.js сделать «снэпшот» холста. Библиотека генерирует изображение в формате PNG и загружает его на наш файловый сервер и базу сохраняет путь
Фронтенд (публичная часть сайта) вообще не знает о существовании сложного редактора или Fabric.js. Когда Yii2 отдает данные для страницы, он просто подставляет ссылку на сгенерированный PNG.
Для пользователя это выглядит как обычная картинка. Но для бизнеса это картинка, которую можно изменить за 30 секунд без участия дизайнера.
Конечно, без трудностей не обошлось. Вот с чем придется столкнуться, если решите повторить этот опыт:
Чтобы текст на картинке выглядел красиво, нужны нестандартные детские шрифты. Но Fabric.js отрисовывает текст на канвасе, только если шрифт уже загружен браузером. Пришлось реализовать предзагрузчик шрифтов в админке. Пока шрифт не загрузится физически, редактор не инициализировался, иначе текст «схлопывался» в стандартный Times New Roman.
Админка позволяет загружать свои картинки (например, логотипы спонсоров) на буклет. Если эти картинки тянулись с другого домена без правильных заголовков, браузер помечал холст как «tainted» (загрязненный) и запрещал экспорт в PNG из соображений безопасности. Пришлось тонко настраивать заголовки Cross-Origin на файловом сервере.
По умолчанию канвас рендерится в разрешении 1:1. На современных телефонах такие буклеты выглядели мыльными. Мы внедрили множитель масштаба при экспорте. В редакторе холст может быть 800px по ширине, но при генерации PNG мы умножали масштаб на 2 или 3, получая четкую картинку высокого разрешения, готовую к печати или просмотру на iPhone.
Вместо сложной цепочки «Заказчик -> Дизайнер -> Верстальщик -> Деплой» мы получили элегантный цикл:
Редактор открыл админку -> Подвигал объекты -> Нажал "Сохранить" -> Профит!
Yii2 надежно хранит историю и управляет файлами, PostgreSQL держит структуру, а Fabric.js берет на себя всю визуальную магию. А главное — дети видят красивые анонсы вовремя, а разработчики могут заниматься кодом, а не заменой картинок по пятницам вечером.
Поделиться
