Image Cropper

A component for uploading and resizing images.

Installation

jsrepo add ui/image-cropper

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.

PropTypeDefault
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.

ImageCropper.

Cropper

The cropper area for selecting the crop region. Forwards all props and behavior to svelte-easy-crop.

ImageCropper.

Controls

Container for cropper controls.

PropTypeDefault
ref? $bindable
HTMLDivElement null
children?
Snippet -
ImageCropper.

Preview

Displays a preview of the cropped image.

PropTypeDefault
child?
Snippet -
ImageCropper.

UploadTrigger

The trigger for uploading an image.

PropTypeDefault
ref? $bindable
HTMLLabelElement null
children?
Snippet -