Image cropper

@summonware/ui · image-cropper · P3 · Forms

Usage

A crop rectangle over Cropper.js (MIT) — real crop math (aspect-locked resize, rotation-aware bounding) is exactly the kind of code worth reusing rather than reimplementing, the same reasoning as `Chart` over Recharts.
import { ImageCropper } from '@summonware/ui';

Best practices

DoSet `aspectRatio` whenever the destination has a fixed shape (a 1:1 avatar, a 16:9 banner) — an unconstrained crop for a fixed-shape destination just moves the problem to whatever renders the result.
Don'tUse this for a crop the user cannot see the effect of yet (e.g. before the image has loaded). Cropper.js needs real image dimensions to initialise correctly.

Examples

Common configurations, variations and states.

Square avatar crop

Image to crop
Drag the handles to adjust — locked to a 1:1 aspect ratio.

Reference variants

1 of 1 labels from the reference are demonstrated above.
Image Cropper Plugin