How to set the cropping tool to a circular or oval shape in the new image editor

Questions / Help
1

I’m using the new file uploader and would like some assistance. Could you guide me on how to set the cropping tool to a circular or oval shape in the image editor?

Thanks in advance.

2

Hi @ramon, At the moment, the uploader supports only rectangular cropping, and other shapes or custom cropping options aren’t available yet.

Could you share more details about your use case? We’d love to understand how custom crop frame shapes could be useful for your needs and explore potential solutions or improvements.

3

Hi Alex,

Thank you for your response!

I was referring to something similar to what was available in the previous version, as shown in this example: https://codepen.io/uploadcare/pen/bKJyjo.

Specifically, I’m interested in the ability to crop images using a circular (or a oval) shape. While this example uses CSS, an ideal solution would offer more flexibility, such as using a mask image or an integrated multi-shape cropping tool (beyond just squares). The modification should be saved as any other modification (crop, color changing, etc.)

Do you think something like this would be possible?

Looking forward to hearing your thoughts!

Best regards,
Ramon

4

Thanks for the detailed explanation! As mentioned, our backend image processing supports both rectangular and circular cropping, but the uploader currently only handles rectangular crops. While circular cropping might be added in future versions, custom crop masks are not supported at this time, either via API or on the client side.

For now, you can use this workaround to make the crop frame appear circular in the uploader:

const ctx = document.querySelector("uc-upload-ctx-provider");
ctx.addEventListener("activity-change", (e) => {
  if (e.detail.activity === "cloud-image-edit") {
    const rect = document.querySelector("#backdrop-mask>rect:nth-of-type(2)");
    if (!rect.getAttribute("rx")) {
      rect.setAttribute("rx", "50%");
    }
  }
});

Please note that while this changes the appearance of the crop frame in the uploader to look circular, the output image will still be cropped as a rectangle.

1 Like
5

This works perfectly fine!!

Thanks a lot!

6

Hi Alex,

How would I make the crop frame appear circular in Jotform? Thanks for your help!

7

@Leila the JotForm plugin uses the old uploader version (jQuery widget), so the approach is going to be different. You need to add the following CSS:

.uploadcare--jcrop-holder > div > div {
  border-radius: 50%;
}

In JotForm, you can add it via Widget Settings > Custom CSS