ImageCropper

тестовое задание на ASP.NET Core 8.0, React и TypeScript

Клиент | React, TypeScript

через форму выбирается картинка требуемого изображения и количество разрезов по горизонтали и вертикали

размер изображения и адрес сервера настраиваются через frontend\src\config.json:

{
  "serverUrl": "https://address:ports/",
  "sizeX": 1600,
  "sizeY": 1200
}

Сервер | ASP.NET Core

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

результат - массив объектов CropResponse:

public class CropResponse
{
    // обрезанное изображение
    public byte[] ImageData { get; set; }

    // координаты
    public int X { get; set; } 
    public int Y { get; set; }

    // размер
    public int Height { get; set; }
    public int Width { get; set; }
}

Пример вывода

оригинал 1600х1200, обрезать на 4х3 картинок

оригинал 1600х1200, обрезать на 10х10 картинок