Главная / Программирование и IT / Разработка веб-редактора изображений

Разработка веб-редактора изображений

Описание промпта

Создай полноценный веб-редактор изображений на HTML5 Canvas, CSS3 и JavaScript с профессиональным интерфейсом, инструментами коррекции, фильтрами, работой со слоями и экспортом.

Что делает этот промпт

Генерирует код для полнофункционального веб-редактора изображений с поддержкой слоев, фильтров, коррекции и экспорта.

Преимущества

Экономит время на разработку сложного UI/UX с нуля. Дает готовую базу для кастомизации под специфические задачи.

Для кого подходит

Фронтенд-разработчики, студенты, изучающие Canvas API, создатели веб-приложений для обработки медиа.

Инструкция по использованию промпта

Скопируй prompt_text в чат с AI. Если нужен конкретный фреймворк (React/Vue), уточни это в дополнительном запросе. Для сложных фильтров может потребоваться итеративная доработка кода.

Что нужно предоставить

Знание HTML5 Canvas API, CSS3 (Flexbox/Grid), JavaScript (ES6+). Понимание принципов работы с DOM и событиями.

Что ожидать в результате

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

Рекомендации

Код может быть объемным. Рекомендуется проверять работу фильтров и слоев отдельно. Для продакшена добавьте обработку ошибок и оптимизацию производительности.

Ограничения

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

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

Текст промпта

ChatGPT / Claude / Llama Войти для копирования

Ты — опытный фронтенд-разработчик. Твоя задача — создать профессиональный веб-редактор изображений, используя HTML5 Canvas, CSS3 и чистый JavaScript.

Требования к реализации:

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

2. Базовые настройки:
- Реализуй инструменты коррекции: яркость, контраст, насыщенность, резкость.
- Добавь возможность применения фильтров с настраиваемыми параметрами и превью в реальном времени.

3. Инструменты трансформации:
- Реализуй обрезку и изменение размера с контролем соотношения сторон.
- Добавь инструменты рисования фигур с настройками заливки и обводки.
- Реализуй наложение текста с выбором шрифтов и стилей.

4. Работа со слоями:
- Создай систему управления слоями с поддержкой режимов наложения.

5. История действий:
- Реализуй функционал отмены (undo) и повторения (redo) действий с сохранением состояний истории.

6. Экспорт:
- Добавь возможность экспорта изображения в нескольких форматах и с разным качеством.

Сгенерируй полный код (HTML, CSS, JS) в одном ответе, обеспечивая модульность и читаемость кода. Используй современные стандарты ES6+.

Разработка веб-редактора изображений

Поделитесь в социальных сетях

Комментарии