Avatar Upload
Forms
Source and install need .
pnpm dlx shadcn@latest add @assembli/image-cropperImage Cropper
A photo cropper for avatars and covers: drag to reposition, scroll or pinch to zoom toward the pointer, straighten on a ruler dial, rotate and flip. The image always covers the crop at any angle, thirds appear while you adjust, and the outside dims (round for avatars). Keyboard pan, zoom and rotate, natural-pixel coordinates, plus drawCrop and cropToBlob to export.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
src*
string
alt
string
Default
""aspects
CropAspect[]
Default
DEFAULT_ASPECTSShapes to choose from. One hides the switcher. Defaults to Square, Portrait, Wide and Original.
defaultAspect
number
Default
0Index into
aspects.height
number
Default
360Height of the editing stage in px. Defaults to 360.
maxZoom
number
Default
5How far past "fills the crop" you can zoom. Defaults to 5.
onCropChange
(area: CropArea) => void
Fires as the crop changes, with natural-pixel coordinates for
drawCrop/cropToBlobor your server.crossOrigin
"anonymous" | "use-credentials"
Default
"anonymous"Sent on the <img>; keep
"anonymous"for remote images you want to export.
| Prop | Type | Default | Description |
|---|---|---|---|
| src* | string | – | |
| alt | string | "" | |
| aspects | CropAspect[] | DEFAULT_ASPECTS | Shapes to choose from. One hides the switcher. Defaults to Square, Portrait, Wide and Original. |
| defaultAspect | number | 0 | Index into aspects. |
| height | number | 360 | Height of the editing stage in px. Defaults to 360. |
| maxZoom | number | 5 | How far past "fills the crop" you can zoom. Defaults to 5. |
| onCropChange | (area: CropArea) => void | – | Fires as the crop changes, with natural-pixel coordinates for drawCrop / cropToBlob or your server. |
| crossOrigin | "anonymous" | "use-credentials" | "anonymous" | Sent on the <img>; keep "anonymous" for remote images you want to export. |
