Is there a way to crop an image to a square using padding?

In order to achieve this you have to set following widget attribute: data-crop to "1:1, free". This will give your user two presets. The user will be able to select the square region or any other region he'd like.

For example, user uploaded the following image:

Source image

https://ucarecdn.com/52da3bfc-7cd8-4861-8b05-126fef7a6994/-/preview/

and selected the following region using manual crop:

region is selected

https://ucarecdn.com/52da3bfc-7cd8-4861-8b05-126fef7a6994/-/crop/1800x1800/0,1700/-/preview/

You want to get square 600x600 picture for your site. You can append following -/preview/600x600/-/crop/600x600/center/ to URL of the selected image and you'll get the following result:

resul image

https://ucarecdn.com/52da3bfc-7cd8-4861-8b05-126fef7a6994/-/crop/1800x1800/0,1700/-/preview/600x600/-/crop/600x600/center/

In case if user selected the whole image without actually cropping it, you'll also get a square image with paddings:

Padded image

https://ucarecdn.com/52da3bfc-7cd8-4861-8b05-126fef7a6994/-/preview/600x600/-/crop/600x600/center/