Skip to content
Anjunar/ DOCS

Image cropper

Upload, crop and bind images through the regular forms contract.
Upload and crop
One control, two image sizes
The cropper stores a bounded main image and generates a separate thumbnail while keeping file readers, canvas interaction and its viewport window lifecycle-bound.
Crop a profile image
Choose an image, adjust the square selection and apply it in the viewport window.
Choose a profile image
Generated thumbnail
Cropped profile image
No cropped image yet.
Readonly state
Editability comes from the same control contract used by Input and ComboBox.
Image selection is disabled
Contextual DSL
ImageCropper remains a normal typed control and can participate in model binding.
scala
imageCropper("profileImage") { placeholder = "Choose a profile image" aspectRatio = Some(1.0) outputMaxWidth = Some(800) outputMaxHeight = Some(800) thumbnailMaxWidth = 160 thumbnailMaxHeight = 160 windowTitle = "Crop profile image" }