MemeGeneratorJS
MemeGeneratorJS
Описание:
-
Это приложение, которое позволяет пользователю создавать собственные мемы.
-
Приложение предоставляет возможность загрузки изображения, добавлять текстовые элементы и настраивать их положение и стиль, сохранять созданный мем на локальном компьютере.
Как использовать
- Управление:
- Загрузка изображения:
- Нажмите на кнопку выбора файла и выберите изображение для загрузки.
- Добавление текста:
- После загрузки изображения введите текст в соответствующее текстовое поле.
- Настройка текста:
- Покрутите колесико мышки, чтобы настроить размер шрифта.
- Вы можете настроить цвет, стиль и шрифт текста с использованием соответствующих элементов управления.
- Позиционирование текста:
- Перетащите текст по холсту, удерживая левую кнопку мыши.
- Сохранение мема:
- Нажмите кнопку "Сохранить", чтобы сохранить созданный мем на локальном компьютере в формате PNG.
- Загрузка изображения:
Обработка событий:
- Обработка загрузки изображения:
- При выборе изображения происходит его загрузка и отображение на холсте.
- Обработка ввода текста:
- Ввод текста вызывает перерисовку текста на холсте с учетом настроек.
- Позиционирование текста:
- Холст реагирует на события мыши, позволяя перетаскивать текст по холсту.
- Изменение размера текста:
- Прокрутка колеса мыши изменяет размер текста для лучшего визуального восприятия.
- Настройка цвета текста:
- Выбор цвета обновляет цвет текста на холсте.
- Настройка стиля текста:
- Изменение стиля текста вызывает перерисовку текста с учетом нового стиля.
- Настройка шрифта текста:
- Выбор шрифта вызывает перерисовку текста с учетом нового шрифта.
Реализация:
-
MAX_SIZE_IMAGE
:- Определяет максимальный размер загружаемого изображения.
-
isDragging, dragStartX, dragStartY
:- Управляют состоянием перетаскивания текста по холсту.
-
textX, textY
:- Определяют текущее положение текста на холсте.
-
image, memeCanvas
:- Содержат объект изображения и холст для отображения мема.
-
textSize, textColor, textStyle, textFont
:- Определяют параметры текста (размер, цвет, стиль, шрифт).
-
handleImageUpload(event)
:- Обрабатывает загрузку изображения и отображает его на холсте.
-
resizeImage()
:- Ограничивает размер изображения с учетом
MAX_SIZE_IMAGE
.
- Ограничивает размер изображения с учетом
-
centerText()
:- Центрирует текст по центру холста.
-
drawText()
:- Отрисовывает текст на холсте с учетом текущих настроек.
-
handleInput()
:- Обрабатывает ввод текста, центрирует его и перерисовывает на холсте.
-
handleMouseDown(event)
:- Обрабатывает событие нажатия мыши для перемещения текста.
-
handleMouseUp()
:- Обрабатывает событие отпускания кнопки мыши.
-
handleMouseMove(event)
:- Обрабатывает движение мыши для перемещения текста.
-
handleWheel(event)
:- Обрабатывает событие прокрутки колеса мыши для изменения размера текста.
-
handleColorChange()
:- Обрабатывает изменение цвета текста.
-
handleStyleChange()
:- Обрабатывает изменение стиля текста.
-
handleFontChange()
:- Обрабатывает изменение шрифта текста.
-
saveMeme()
:- Сохраняет созданный мем в формате PNG на локальном компьютере.
Используемые библиотеки и технологии:
- HTML5, CSS3, JavaScript:
- Основные технологии для разработки веб-приложения.
- Canvas API:
- Используется для отрисовки изображений и текста на холсте.
- FileReader API:
- Используется для чтения содержимого загруженного изображения.
Языки
JavaScript
- HTML
- CSS