Image Crop
DisplayMITDrag-to-crop image utility with optional aspect-ratio lock, circular mask, and canvas export.
bun add @otfdashkit/ui
Preview
Image CropDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { ImageCrop } from '@otfdashkit/ui'
const SAMPLE =
'https://images.unsplash.com/photo-1500964757637-c85e8a162699?w=1200&h=900&fit=crop&q=80'
export function Example() {
return (
<div className="w-[640px] max-w-full">
<ImageCrop src={SAMPLE} alt="Mountain landscape" />
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
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. |