Maintained by: Muskan Sinha

CropperJS Module Documentation

CropperJS is a custom app connect module that simplifies the process of adding image cropping functionality to web applications. It is mainly used for compression and resizing images, offering a user-friendly interface that allows users to select and adjust the cropping area of an image before obtaining the cropped data.

CropperJS Properties

1. ID: Unique ID for the CropperJS. (Required)
2. Src: Src of the image to be cropped. (Required)
3. Field ID: Set the id of the image uploader. (Required)

CropperJS Component Options

This describes the options available for the Cropper component and their default values.

1. View Mode: Define the view mode of the CropperJS. (Default: 0)
2. Drag Mode: Define the drag mode of the CropperJS. (Default: "crop")
3. Initial Aspect Ratio: Define the initial aspect ratio of the CropperJS. (Default: 0)
4. Aspect Ratio: Define the aspect ratio of the CropperJS. (Default: 0)
5. No Responsive: Disable responsiveness of the CropperJS. (Default: false)
6. Restore: Enable restoring of the CropperJS. (Default: false)
7. No Check Cross Origin: Disable checking cross origin of the CropperJS. (Default: false)
8. No Check Orientation: Disable checking orientation of the CropperJS. (Default: false)
9. No Modal: Disable modal of the CropperJS. (Default: false)
10. No Guides: Disable guides of the CropperJS. (Default: false)
11. No Center: Disable centering of the CropperJS. (Default: false)
12. No Highlight: Disable highlighting of the CropperJS. (Default: false)
13. No Background: Disable background of the CropperJS. (Default: false)
14. No Auto Crop: Disable auto cropping of the CropperJS. (Default: false)
15. Auto Crop Area: Define the auto crop area of the CropperJS. (Default: 0.8)
16. No Movable: Disable moving of the CropperJS. (Default: false)
17. No Rotable: Disable rotating of the CropperJS. (Default: false)
18. No Scalable: Disable scaling of the CropperJS. (Default: false)
19. No Zoomable: Disable zooming of the CropperJS. (Default: false)
20. No Zoom On Touch: Disable zooming on touch of the CropperJS. (Default: false)
21. No Zoom On Wheel: Disable zooming on wheel of the CropperJS. (Default: false)
22. Wheel Zoom Ratio: Define the wheel zoom ratio of the CropperJS. (Default: 0.1)
23. No Crop Box Movable: Disable moving the crop box of the CropperJS. (Default: false)
24. No Crop Box Resizable: Disable resizing the crop box of the CropperJS. (Default: false)
25. No Toggle Drag Mode On Dblclick: Disable toggling drag mode on double click of the CropperJS. (Default: false)
26. Min Container Width: Define the minimum container width of the CropperJS. (Default: 200)
27. Min Container Height: Define the minimum container height of the CropperJS. (Default: 100)
28. Min Canvas Width: Define the minimum canvas width of the CropperJS. (Default: 0)
29. Min Canvas Height: Define the minimum canvas height of the CropperJS. (Default: 0)
30. Min Crop Box Width: Define the minimum crop box width of the CropperJS. (Default: 0)
31. Min Crop Box Height: Define the minimum crop box height of the CropperJS. (Default: 0)

Action Attributes

File

• Used to fetch the file attributes of the uploaded image file.

License

The Cropper JS module is licensed under the MIT License. Please refer to the license file for more details.

For any issues or further assistance, please contact our support team.