Обрезка картинок

Реализуйте сервис, с помощью которого можно осуществлять обрезку изображений.

Основные возможности проекта

• Загрузка изображения с компьютера пользователя.
• Отображение загруженного изображения на canvas.
• Выделение области обрезки с помощью прямоугольника (клик и перетаскивание мышью).
• Отображение превью обрезанного изображения.
• Скачивание обрезанной картинки в формате PNG.

Главная страница

На странице должны быть размещены:

• Кнопка для загрузки изображения.
• Canvas для отображения изображения и работы с выделением.
• Область для превью обрезанного изображения.
• Кнопка "Скачать" для сохранения обрезанной картинки.

Загрузка изображения

Пользователь загружает изображение через стандартный input type="file". После загрузки изображение отображается на canvas. Поддерживаемые форматы: JPEG, PNG, GIF.

Выделение области обрезки

Пользователь может выбрать область обрезки с помощью мыши:

• Нажать левую кнопку мыши на canvas - начать выделение.
• Перемещать мышь - растягивать прямоугольник.
• Отпустить кнопку мыши - зафиксировать выделение.

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

Превью обрезанного изображения

После фиксации выделения в отдельной области (preview) должно отображаться обрезанное изображение в соответствии с выбранной областью.

Скачивание результата

При нажатии на кнопку "Скачать" обрезанное изображение сохраняется на компьютер пользователя в формате PNG. Имя файла формируется автоматически (например, cropped_image.png).

Дополнительные возможности

• Возможность перемещать выделенную область после фиксации.
• Возможность изменять размер выделенной области (растягивать за углы).
• Сохранение изображения в разных форматах (JPEG, PNG).