Avatar Cropper

A simple avatar cropper based on open source library Croppie.

Go to EDITOR

‍

‍This uses the open source library.

Instructions

1. Add Cropper on your page
2. 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)
3. Setup actions & events
   Actions:
   - '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)
   Events:
   - '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)