This is a highly customizable Desktop and mobile friendly Image Cropper. It’s based on Cropper.js
This Cropper has 4 different styles and 14 different customization options.
How to use
- Put the Cropper Element on your page.
- Fill out the properties however you want.
- To get your Cropped image, run the “Get Cropped Image” action.
- Access the cropped Image in the elements “Cropped Image” state
- Upload the Cropped image using the “Upload Cropped Image” action
- Access the Uploaded Cropped Image in the elements state “Uploaded Image”
Update the Cropper elements image source by running the action “Set Image Source” and provide the image source in the property editor.
You must always run the “Get Cropped image” workflow before you run the “Upload Cropped Image” action. You can do them in the same workflow.
Do NOT try to create a Bubble Data Object with “Cropped Image” state. It will cause your application to slowdown significantly. ALWAYS make sure you use the “Uploaded Cropped Image” state for creating an object in the database.