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:
  • Используется для чтения содержимого загруженного изображения.