ImageCropper

ImageCropper — кадрирование фото на Ark ImageCropper. Размер итогового файла задаёт потребитель (size, в пикселях), а пользователь только подгоняет фото под неподвижную рамку: двигает его мышью или пальцем и зумит ползунком, колесом или щипком. Вытащить из-под рамки край фото нельзя — пустых полей в файле не бывает.

Исходник — File, обычно из FileUpload: кроппер ставится на место дроп-зоны или в окно, где и как — решает потребитель. ImageCropper.Viewport — область с рамкой, ImageCropper.Zoom — ползунок под ней.

Результат забирают в момент сохранения: ref.current.getCroppedFile() вырезает то, что в рамке, и приводит к size — выбранный кусок ужимается или растягивается до заданных пикселей. Формат файла — как у исходника (JPEG, PNG, WebP; остальные становятся PNG), другой задаётся аргументом { type, quality }. Пока фото не прочитано, метод возвращает null.

Кроп как шаг: по «Готово» кроппер уступает место готовой картинке, «Редактировать» возвращает его обратно. Кроппер при этом не размонтируется, а прячется через style — поэтому возвращается с тем же зумом и положением фото, а не с начала.

Аватарка: загрузчик показывает уже кадрированный файл, а выбранное фото уходит в FloatingPanel и попадает в набор только после «Сохранить». Для этого acceptedFiles ведётся контролируемо, а onFileAccept вместо записи в набор открывает окно. shape="circle" — круглая маска: сам файл остаётся квадратным.

Область кадрирования. Рамка — наибольшая из помещающихся в область с полями, поэтому высоту области (по умолчанию 280px) задают className / style. Пока фото читается, область пуста; файл, который не открылся как изображение, заменяется сообщением.

Ползунок зума от 1 (фото вписано в рамку вплотную) до maxZoom. Необязателен: колесо и щипок работают и без него, но с клавиатуры зум доступен только здесь.