How to trim image to circle image without jaggy?

Is there a way to trim image to circle without jaggy ?

I implemented trimming code here.

I'm using image crate. First arg is image::ImageBuffer. Second arg is BorderRadius that indicates radius of each corner of a square.

Result image is left top on this image(base image is here).

Thank you.

I gave this a go and kind-of invented my own anti-aliased corner-rounding algorithm since I couldn't find a good reference online. (Also, I didn’t want to use floats or too bad approximations, or iterate over the whole image when only rounding a small corner, which further limits the possible approaches.)

It doesn't support "adding a border"; that was in your TODOs but I didn't know what exactly that was supposed to mean :sweat_smile:

Here’s the code:

And the result

og_image_writer/output_absolute.png at aliased_circle · steffahn/og_image_writer · GitHub

As you can see, it’s the aliased_circle branch on my fork. Feel free take the code in that branch and do with it whatever you like.

I haven’t really explained any details of how exactly it works right now (have some calculations on paper regarding the coordinates) and didn’t do too much testing, but I do think I might have gotten all the relevant corner cases right.


If you take a look at the first commit of the two, there’s some unpolished debug-version of the code, where the resulting images show indicate which pixels were touched, in what kind of process, and for the border ones what transparency value was used. E.g. look at these images:

og_image_writer/output_absolute.png at c0355b7ffe917b638b21748b435a2d32c636b973 · steffahn/og_image_writer · GitHub

og_image_writer/output_container.png at c0355b7ffe917b638b21748b435a2d32c636b973 · steffahn/og_image_writer · GitHub


Edit: Added a third commit that addresses the case of a zero radius.
Edit2: Added a fourth commit that makes a small adjustment that I wanted to make anyways, but forgot.

4 Likes

Awesome😳 I can't thank you enough.
I will try learning the logic from your code :smiley:

I couldn't find a good reference online.

Yes, me too... I hope to read the reference about these logics.

It doesn't support "adding a border"; that was in your TODOs but I didn't know what exactly that was supposed to mean :sweat_smile:

border is line at the edge of image like the css border.

Anyway, thank you for sending your great solution.

I did a little poking and found this blog post which looks like a decent reference for drawing antialiased circles (and other curves).

1 Like

Well, if you need a border without new complicated code, there’s always the option of simply drawing a slightly bigger single-colored circle or rounded-rectangle underneath. (This would expand the border to the outside. If it should expand inside, you’d need to crop the image accordingly.)


That might be hard, because it’s not really documented. Here’s a few notes I made for you; with those it might become possible to understand (most of) the code.

^^ * correction “x grows going right”

^^ * correction “curce -> curve”

3 Likes

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.