ImageCropper
ShowcaseComponentsImageCropper
Media

ImageCropper.

Crop images to a chosen aspect ratio and emit PNG blobs via Canvas.

Real interactive component
Live demo
Crop image1.00 aspect
Crop preview

The preview uses the actual shared component, including your current theme, rounding, border and motion preferences.

Props & API reference

Parameters available in the shared component, including value types, requirements and accepted options.

5 props
ParameterTypeRequiredDefaultPossible valuesDescription
srcstringYes——Image URL; cross-origin images require CORS access.
onCrop(blob:Blob)=>voidNo——Receives PNG canvas output.
aspectRationumberNo1—Output width divided by height.
labelstringNoCrop image—Accessible editor name.
classNamestringNo——Additional CSS class on the outer component element.