Installation
Usage
Square Preview
No Default Image
Custom Trigger
Upload image
Custom Preview
Acknowledgements
This component was inspired by sujjeee/shadcn-image-cropper.
API Reference
ImageCropper.
Root
The root component for the image cropper. Handles image upload, cropping, and state management.
Prop | Type | Default |
---|---|---|
src? $bindable | string | - |
onCropped? | function | - |
onUnsupportedFile? | function | - |
children? | Snippet | - |
ImageCropper.
Dialog
Dialog wrapper for the image cropper. Forwards all props and behavior to the shadcn-svelte Dialog component.
Documentation for this component's props can be found at bits-ui
ImageCropper.
Cropper
The cropper area for selecting the crop region. Forwards all props and behavior to svelte-easy-crop.
Documentation for this component's props can be found at svelte-easy-crop
ImageCropper.
Controls
Container for cropper controls.
Prop | Type | Default |
---|---|---|
ref? $bindable | HTMLDivElement | null |
children? | Snippet | - |
ImageCropper.
Preview
Displays a preview of the cropped image.
ImageCropper.
UploadTrigger
The trigger for uploading an image.
Prop | Type | Default |
---|---|---|
ref? $bindable | HTMLLabelElement | null |
children? | Snippet | - |