Image Cropper
Crop a drawn image or an uploaded file with a draggable, resizable box, aspect presets, zoom, quarter-turn rotation, thirds grid, keyboard nudging, live preview and canvas export.
Preview
1.0×
Preview
Ines Varga
Avatar preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image URL (an object URL from a file works); or pass children. |
| children | ReactNode | — | A drawn image (e.g. an SVG) that fills its box. |
| imageWidth / imageHeight | number | 1200 / 800 | Natural size in pixels; read from src when it loads. |
| alt | string | "Image to crop" | Text alternative for the image. |
| aspects / defaultAspect | { label, value }[] / number | null | Free, 1:1, 4:5, 16:9 / null | Aspect presets and the starting one (width / height, null for free). |
| shape | "rect" | "circle" | "rect" | circle gives a round 1:1 box for avatars. |
| maxZoom | number | 3 | Highest zoom for the slider and wheel. |
| onCropChange | (result: { crop, rotation, zoom }) => void | — | crop is { x, y, width, height } in pixels of the image after rotation. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.