This Widget | Demo is a wrapper for the Croppie image cropping library and you can use it to crop images in your Mendix App.
After you put the widget in a data-view with an entity which inherits from 'System.Image' and once you run your application and the widget is initialized, it will create an instance of the same type as the context, this instance will be the object that will be coupled with the resulted/cropped image.
After cropping an image successfully, a mandatory Microflow will be triggered & applied on the resulted object, you can use this Microflow to apply your logic on the resulted image. An Optional Microflow also will be triggered and applied on the original image (context) e.g. delete the original image after cropping.
- Place the widget in a data-view with an entity inherits from (has the generalization of)
'System.Image'. - Set Cropped Image Microflow, this is where you will get the control on the resulted image.
- Set Original Image Microflow, this is where you will get the control on the original image [optional].
- Set your cropping configuration.
- Set your configuration for the resulting image.
| Name | Type | Description |
|---|---|---|
| Cropped Image MF | Microflow | This microflow returns the control on the cropped image. Cropped image Object will be passed as a parameeter to the Microflow. |
| Original Image MF | Microflow | This microflow returns the control on the original image. Orignal image Object will be passed as a parameeter to the Microflow. |
| Name | Type | Description |
|---|---|---|
| Boundary Width | Number(integer) | The width of the widgte in px. |
| Boundary Height | Number(integer) | The height of the widgte in px. |
| Viewport Type | Enum: ('Circle','Square') | The type of the viewport (cropping window). |
| Enable Zoomer | Boolean | Enable/Disable zooming on the image. |
| Enable Resize | Boolean | Enable/Disable resizing the image. |
| Mouse Wheel Zoom | Enum: ('Yes' , 'Yes + Ctrl' , 'No') | Enable/Disable the ability to zoom on the image by the mouse wheel. if Yes + Ctrl is selected, this means that you need to press Ctrl in order for the zooming with mouse wheel to work. Please note that zommer should be enabled. |
| Crop Button Style | Enum: ('Default' , 'Primary' , 'Success' , 'Info' , 'Warning' , 'Danger') | Sets the style of the cropping button. |
| Show Preview | Boolean | Display/Hide the preview image of your current selection. |
| Name | Type | Description |
|---|---|---|
| Format | Enum('png' , 'jpg') | The format of the resulted image. |
| Quality | Number(float) | A decimal number between 0 and 1 defines the compression rate on the resulted image. Please note that this option is only applicable when the selected format is Format: jpg. |
| Size | Enum('Viewport', 'Original') | If Viewport is selected, the size of the resulting image will be the same width and height as the viewport. If Original is selected, the size of the resulting image will be at the original scale of the image. |
Mx6.0.1 or higher.
- Initializing the widget in an invisible element will cause the widget to function inconsistently in regard to viewing & cropping the image you want to crop. e.g. using the widget in a 'Gropu box' container with the default state is set to 'start collapsed'. We'll consider fixing this issue in a future release. However, if this situation occurs it has no sideeffects on any other component.
- When you set the
Viewportto beCircleand theFomrattojpg, the areas of the resulted image that are outside the cropped circle will be replaced with black background. Please see the image below :
Set Format to png if you want to get a transparent frame for your rounded image.
If any issue encountered using this widget, please report it here