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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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