A simple avatar cropper based on open source library Croppie.
Go to EDITOR
This uses the open source library.
- Add Cropper on your page
- Fill up all necessary properties
- Image for cropping (Image reference, can be used as dynamic value, for example: 'PictureUploader's value')
- Show zoom slider element (Enable/Disable zoom slider at the bottom for cropper)
- Zoom enabled
- Rotate enabled
- Boundary square enabled (By default, the boundary will be represented as a circle)
- Boundary height/width (if it's empty, will use a size of element in the editor)
- Selection zone height/width (If it's empty, will generate a size automatically depending on the size of the cropper element)
- Setup actions & events
- 'crop image' action (trigger an image cropping and store it in a state as 'cropped image.'
- 'rotate left' action (rotate an image on 90°)
- 'rotate right' action (rotate an image on -90°)
- 'set zoom' action (can be used for custom zoom picker, it will zoom a selection zone by value: min 0.0 - max 1.0)
- 'remove image' (remove an image from cropper)
- 'image cropped' event (proceed only after the image was successfully cropped by 'crop image' action)
- 'image removed' event (proceed after the image was removed by 'remove image' action)