Image Crop Add-on

Image Crop Add-on for Vaadin Flow

View larger

Close

View larger

Close

Component for cropping images.

Wrapper for React component react-image-crop.

Features

The component allows to crop images and configure the following properties for a customized crop:

• crop dimensions (unit, x and y coordinates, width, and height)
• aspect ratio (for example, 1 for a square or 16/9 for landscape)
• circular crop (selection are has circular shape)
• keep selection (selection can't be disabled if the user clicks outside the selection area)
• disabled (cannot resize or draw a new crop)
• locked (cannot create or resize a crop, but can still drag the existing crop around)
• min width (minimum crop width)
• min height (minimum crop height)
• max width (maximum crop width)
• max height (maximum crop height)
• rule of thirds (to show rule of thirds lines in the cropped area)

The cropped image result can be obtain as a URI using getCroppedImageDataUri method or as a Base64 encoded byte array by using getCroppedImageBase64 method.

Found a bug or have a suggestion? Report it on GitHub

For bug reports, feature suggestions, or questions, please open an issue on GitHub. This makes it easier for us to track and respond efficiently, ensuring you get the best possible support. Your input helps us improve—thank you!

Sample code

Image image = new Image("images/my-image.png", "image to crop");  
ImageCrop imageCrop = new ImageCrop(image);
add(imageCrop);

Image croppedImage = new Image(imageCrop.getCroppedImageDataUri(), "cropped image")

Image image = new Image("images/my-image.png", "image to crop");  
ImageCrop imageCrop = new ImageCrop(image );
imageCrop.setAspect(1.0);
imageCrop.setCircularCrop(true);
imageCrop.setCrop(new Crop("%", 25, 25, 50, 50)); 
add(imageCrop);

Links

• Author Homepage
• Online Demo
• Issue tracker
• View on GitHub

Compatibility