Clipping an image onto a circle without pixelated edges

[hendrikdemir]

Hi folks, I'm trying to clip my profile picture onto a circle. However, it always leaves me with pixelated edges. I've tried two ways to do this.

First attempt

Code

await using var avatarStream = await Client.GetStreamAsync(...);
using var avatarImage = new MagickImage(avatarStream);
avatarImage.Resize(new MagickGeometry
{
    Width = 250,
    Height = 250
});

using var avatarLayer = new MagickImage(MagickColors.Transparent, 250, 250);
avatarLayer.Draw(
    new DrawableFillColor(MagickColors.White),
    new DrawableCircle(125, 125, 125, 0)
);

avatarLayer.Composite(avatarImage, CompositeOperator.Atop);

image.Draw(new DrawableComposite(image.Width / 2 - 125, 75, CompositeOperator.Over, avatarLayer));

Result

Second attempt (based upon the example made by @dlemstra at here)

Code

await using var avatarStream = await Client.GetStreamAsync(...);
using var avatarImage = new MagickImage(avatarStream);
avatarImage.Resize(new MagickGeometry
{
    Width = 250,
    Height = 250
});

using var mask = new MagickImage(MagickColors.White, avatarImage.Width, avatarImage.Height);
var size = 125;

new ImageMagick.Drawables()
    .FillColor(MagickColors.Black)
    .StrokeColor(MagickColors.Black)
    .Polygon(new PointD(0, 0), new PointD(0, size), new PointD(size, 0))
    .Polygon(new PointD(mask.Width, 0), new PointD(mask.Width, size), new PointD(mask.Width - size, 0))
    .Polygon(new PointD(0, mask.Height), new PointD(0, mask.Height - size), new PointD(size, mask.Height))
    .Polygon(new PointD(mask.Width, mask.Height), new PointD(mask.Width, mask.Height - size), new PointD(mask.Width - size, mask.Height))
    .FillColor(MagickColors.White)
    .StrokeColor(MagickColors.White)
    .Circle(size, size, size, 0)
    .Circle(mask.Width - size, size, mask.Width - size, 0)
    .Circle(size, mask.Height - size, 0, mask.Height - size)
    .Circle(mask.Width - size, mask.Height - size, mask.Width - size, mask.Height)
    .StrokeAntialias(true)
    .Draw(mask);

using var imageAlpha = avatarImage.Clone();
imageAlpha.Alpha(AlphaOption.Extract);
imageAlpha.Opaque(MagickColors.White, MagickColors.None);
mask.Composite(imageAlpha, CompositeOperator.Over);

mask.HasAlpha = false;
avatarImage.HasAlpha = false;
avatarImage.Composite(mask, CompositeOperator.CopyAlpha);
image.Draw(new DrawableComposite(image.Width / 2 - 125, 75, CompositeOperator.Over, avatarImage));

Result

Expected result (made using Photoshop)

Notice how both images that I made with Magick.NET are a bit cut off on the right and the bottom.

[dlemstra]

What is your output format?

[hendrikdemir]

PNG

[dlemstra]

I don't know what can be done to get smoother edges. You might want to ask your question here: https://github.com/ImageMagick/ImageMagick/discussions instead. I can then help you translate the command line to C#.