Dropbox Paper

06. Croppie

The Croppie BlackBox is used to crop and manipulate an image stored in a container field. It utilises the Croppie library. The manipulated image will be exported to a seperate container field.

https://foliotek.github.io/Croppie/

The following interactions are included:

Bring in an image from a container field

Save Base64 for cropped image to another field

Parameters

The parameters are as follows:

Croppie ( containerOriginal ; containerID ; containerTarget { ; settings_viewport_width ; settings_viewport_height ; settings_viewport_type ; settings_boundary_width ; settings_boundary_height ; settings_showzoomer ; settings_enableresizer ; settings_mousewheelzoom ; settings_enableexif } )

Parameter	Description
containerOriginal	A field that contains a container image Eg, "bb_data_planets__SINGLE::image"
containerID	A unique ID field for the record, associated with the container image Eg, "bb_data_planets__SINGLE::id"
containerTarget	A field that will receive the Base64 for the cropped image when the changes are saved Eg, "bb_data_planets__SINGLE::image_cropped_b64"

The following optional parameters are also available:

Parameter	Description
settings_viewport_width	The width of the viewport for the image Eg, "200"
settings_viewport_height	The height of the viewport for the image Eg, "200"
settings_viewport_type	The shape of the viewport for the image Eg, "circle"
settings_boundary_width	The width of the boundary for the cropping area Eg, "300"
settings_boundary_height	The height of the viewport for the cropping area Eg, "300"
settings_showzoomer	Whether or not the zoom control will show Eg, "true"
settings_enableresizer	Whether or not the image can be resized Eg, "false"
settings_mousewheelzoom	Whether or not the mouse wheel can be used to zoom the image Eg, "true"
settings_enableexif	Whether or not to apply exif orientation settings for image Eg, "false"

View the Croppie documentation for more details, and additional settings:

https://foliotek.github.io/Croppie/

Example