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
Have you tried processed with imgix?
I think there is an option to make it a circle. Would that work in your case?
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.
Awe. That stinks. Bummer.
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.
This topic was automatically closed after 70 days. New replies are no longer allowed.