Crop square image to circle with transparent background? Can't use Bubble's "Roundness"

[greg18]

I need to crop a user’s existing square profile PNG into a circle with transparent background, to be used in a Bubble plugin (as map markers in @ZeroqodeSupport’s Mapbox plugin).

In other words, I can’t use Bubble’s Roundness or other design settings to achieve a circular image. Instead I need to actually crop the PNG into a circle with a transparent background.

I tried creating an image element with rounded corners to make a circle, and then tested out multiple element-to-png plugins – but none could create a round png with transparent background.

I found this Circle Crop API but it requires JS – beyond my current abilities.

Any ideas? Thanks in advance

[J805]

@greg18 hey

Have you tried processed with imgix?

I think there is an option to make it a circle. Would that work in your case?

[greg18]

Hi @J805, yes I investigated Imgix but it only saves as jpeg (even when set to png). When you set Imgix to circle it only creates a jpeg with a circle around it – not a transparent background.

[J805]

Awe. That stinks. Bummer.

[greg18]

Good news - the “Image Cropper” plugin (built on the Cropper js library) can cut a circular PNG with a transparent background.

I searched far and wide and could find no other plugin that can cut a circular PNG with transparent background. Even the “Cropper” plugin (also built on the Cropper js library), which has a setting for circular cut, will actually output a rectangular jpeg.