Add a circular crop overlay to help your users get the best image crop. This is useful if you plan to display images with border-radius: 50%.
// Render circular overlay on the crop interface.
gform.addFilter('image_hopper_filepond_config', function(config, FilePond, $form, currentPage, formId, fieldId, entryId, files, inputField) {
config.imageEditor.editorOptions.willRenderCanvas = function(shapes, state) {
const {
utilVisibility,
selectionRect,
lineColor,
backgroundColor,
} = state;
// Exit if crop utils is not visible
if (utilVisibility.crop <= 0) return shapes;
// Get variable shortcuts to the crop selection rect
const { x, y, width, height } = selectionRect;
return {
// Copy all props from current shapes
...shapes,
// Now we add an inverted ellipse shape to the interface shapes array
interfaceShapes: [
{
x: x + width * 0.5,
y: y + height * 0.5,
rx: width * 0.5,
ry: height * 0.5,
opacity: utilVisibility.crop,
inverted: true,
backgroundColor: [...backgroundColor, 0.5],
strokeWidth: 1,
strokeColor: [...lineColor],
},
// Spread all existing interface shapes onto the array
...shapes.interfaceShapes,
],
}
}
return config
}, 20 )