How to trim image to circle image without jaggy?

keiya01 · January 15, 2022, 8:19am

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.

steffahn · January 15, 2022, 1:58pm

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

Here’s the code:

github.com

steffahn/og_image_writer/blob/aliased_circle/og_image_writer/src/img.rs#L71-L183

    
      
          pub(super) fn round(img: &mut ImageBuffer<Rgba<u8>, Vec<u8>>, radius: &mut BorderRadius) {
              let (width, height) = img.dimensions();
              assert!(radius.0 + radius.1 <= width);
              assert!(radius.3 + radius.2 <= width);
              assert!(radius.0 + radius.3 <= height);
              assert!(radius.1 + radius.2 <= height);
          
          
    // top left
              border_radius(img, radius.0, |x, y| (x - 1, y - 1));
              // top right
              border_radius(img, radius.1, |x, y| (width - x, y - 1));
              // bottom right
              border_radius(img, radius.2, |x, y| (width - x, height - y));
              // bottom left
              border_radius(img, radius.3, |x, y| (x - 1, height - y));
          }
          
          
fn border_radius(
              img: &mut ImageBuffer<Rgba<u8>, Vec<u8>>,
              r: u32,

This file has been truncated. show original

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.

keiya01 · January 15, 2022, 2:35pm

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

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

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

Anyway, thank you for sending your great solution.

2e71828 · January 15, 2022, 3:00pm

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

steffahn · January 15, 2022, 3:23pm

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”