Image Crop
DisplayDrag-to-crop image utility with optional aspect-ratio lock, circular mask, and canvas export.
Image CropDisplay · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Image Crop from @otfdashkit/ui.
Code
// Image Crop — Drag-to-crop image utility with optional aspect-ratio lock, circular mask, and canvas export.
//
// Install:
// bun add @otfdashkit/ui
import { ImageCrop } from '@otfdashkit/ui'
export function Example() {
return (
<ImageCrop>
{/* your content */}
</ImageCrop>
)
}Props
Props declared in the ImageCrop source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| srcrequired | string | Image URL — required. | |
| alt | string | 'Crop source' | Alt text for the source image. |
| aspect | number | Optional aspect-ratio lock, e.g. 16/9, 1, 4/3. | |
| circular | boolean | false | Render a circular crop mask (for avatars). Default false. |
| defaultCrop | { x: number; y: number; width: number; height: number; } | Initial crop in % values. | |
| minHeight | number | Minimum crop height in pixels. | |
| minWidth | number | Minimum crop width in pixels. | |
| onComplete | (result: { croppedSrc: string; crop: PixelCrop; }) => void | Fired (debounced) after a drag with the cropped data URL + pixel crop. | |
| outputFormat | 'png' | 'jpeg' | 'webp' | 'png' | Output image format. Default 'png'. |
| outputQuality | number | 0.92 | Output image quality 0..1 (jpeg/webp only). Default 0.92. |