Web Image Editor

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

Компьютерная графика и Алгоритмы

Проект построен на глубоком понимании математики изображений. Вся обработка пикселей реализована вручную:

• Матричная свёртка (Convolution): Реализован движок для применения ядер свертки (Blur, Sharpen, Edge Detection, Emboss). Поддерживаются кастомные ядра 3x3.
• Цветовые пространства: Реализованы алгоритмы конвертации цвета между RGB, XYZ, Lab, LCH и OKLCH для точной работы инструмента "Пипетка".
• Интерполяция: При изменении размера изображения используются алгоритмы Bilinear и Nearest-Neighbor интерполяции.
• Коррекция кривых (Curves): Математическая модель для изменения тонального диапазона изображения (аналог Curves в Photoshop) для RGB и Альфа-каналов.

Производительность и Архитектура

Для обеспечения плавной работы интерфейса при обработке больших изображений использованы современные браузерные API:

• Web Workers: Тяжелые вычисления (фильтры, ресайз) вынесены в отдельные потоки. Это позволяет интерфейсу оставаться отзывчивым (60 FPS) даже во время сложных операций.
• OffscreenCanvas: Оптимизация рендеринга слоев.
• Собственный формат GrayBit-7: Разработан и реализован парсер бинарного формата файлов .gb7 (7-битная глубина цвета + маска) для работы с сырыми данными.

Тестирование и Надежность

В проекте реализовано комплексное Unit-тестирование с использованием Vitest и React Testing Library. Это гарантирует точность математических вычислений:

• Математическое ядро: Покрыты тестами алгоритмы смешивания (Blending Modes), формулы конвертации цветовых пространств и генерация LUT-таблиц для кривых.
• Обработка данных: Валидация кодирования/декодирования бинарного формата GrayBit-7 и алгоритмов интерполяции.
• UI Компоненты: Тестирование рендеринга и начального состояния основных модулей интерфейса (DropZone, StatusBar).

UI/UX и Material Design

Интерфейс приложения построен на Material UI (MUI), что обеспечило профессиональный внешний вид и удобство использования:

• Адаптивная верстка: Панели инструментов, диалоговые окна и слайдеры реализованы с использованием компонентов MUI.
• Сложные контролы: Разработан кастомный интерактивный график для инструмента Curves.
• Zustand: Управление состоянием приложения (список слоев, история действий, настройки кистей) реализовано через Zustand, что упростило архитектуру по сравнению с Redux.

Ключевой функционал

1. Система слоев: Полноценный композитинг с поддержкой Blending Modes (Multiply, Overlay, Soft/Hard Light).
2. Маски и Альфа-каналы: Возможность создавать и редактировать маски прозрачности.
3. Экспорт и Импорт: Поддержка PNG, JPEG и кастомного формата. Настройка качества сжатия при экспорте.

Проект демонстрирует способность решать низкоуровневые задачи фронтенда, работать с TypedArrays и бинарными данными, а также проектировать сложную архитектуру клиентских приложений.