Разработка редактора изображений на Холсте (Canvas)
Общее описание
Необходимо разработать интерактивный веб-редактор изображений на базе Vue.js и Канвас (Canvas). Пользователь должен иметь возможность добавлять на холст блоки, каждый из которых отображает отдельное изображение. Важно поддерживать загрузку файлов различных графических форматов.
Основной функционал
1. Импорт и экспорт изображений
- Экспорт: Возможность сохранения итогового изображения в форматах JPEG, PNG, WebP с настраиваемыми параметрами качества и контроль конечного размера файла.
- Импорт: Поддержка популярных расширений файлов (JPEG, PNG, WebP, GIF и др.).
2. Инструменты первичной обработки (Кроппер)
Предусмотреть модуль для обрезки, масштабирования, изменения пропорций и поворота загружаемого изображения на определенный угол непосредственно в процессе добавления.
3. Инструменты вторичной обработки
Все функции из пункта 2 (как минимум: обрезка, масштабирование, изменение размеров, поворот) должны оставаться доступными для любого изображения, уже размещенного на холсте.
4. Трансформация и цветокоррекция
- Отражение: Зеркальное отображение изображения по горизонтали и вертикали.
- Коррекция: Настройка яркости, контрастности, насыщенности, баланса белого и прочих цветовых параметров для улучшения цветопередачи конечного результата.
5. Рисование и Ретушь
Реализация набора инструментов для рисования (кисти разного типа, карандаш) и ретуши (ластик, инструмент клонирования/заплатка) для исправления дефектов (так называемый технический Skill.
6. Работа с текстом
Добавление текстовых надписей, настраиваемых шрифтов и подписей к изображению.
7. Управление цветом
Реализация работы с палитрой: стандартные и настраиваемые цвета, инструмент "пипетка" для выбора цвета с любой точки холста.
8. Масштабирование (Зум)
Реализация логики для увеличения отдельных фрагментов изображения, что необходимо для точной работы с мелкими элементами.
Технические требования
- Стек: В качестве основных технологий использовать Vue.js (фреймворк) и Канвас JS (Каnva или нативный canvas/анг)
- Интерфейс: Необходимо разработать интерфейс блоков (как на тизере)
Дополнительно
Вопросы по деталям API, архитектуре проекта и его прототипированию обсуждаются лично. Опыт с visual-редакторами будет преимуществом.