MagickImage create soft edge that goes into 100% transparent

Question

My goal is to create a soft border on any picture where the edges go into 100% transparent color (You should not be able to see the edge of the image)

Here's the original image:

I found this (http://www.imagemagick.org/Usage/thumbnails/#rounded):

convert thumbnail.gif -alpha set -virtual-pixel transparent \
          -channel A -blur 0x8  -level 50%,100% +channel  soft_edge.png

Which is what I then have made this from:

var mImage = new MagickImage(image);
mImage.Format = MagickFormat.Png;
mImage.Alpha(AlphaOption.Set);
mImage.VirtualPixelMethod = VirtualPixelMethod.Transparent;

var form = mImage.Clone();
form.Level(new Percentage(50), new Percentage(100),Channels.Alpha);
form.Blur(100, 50,Channels.Alpha);
mImage.Composite(form);
mImage.Write(image);

And the result from that is this:

However, you can still clearly see the edges, and so they are not transparent enough.

When I take the image into Paint.NET I see that the edges are indeed somewhat transparent, but the edges are likely only 50% transparent, not 100%.

I have tried to adjust the Level percentages, the blur, and so on and so forth, but I cannot seem to get the edges to blur out properly.

How can I make the edges 100% transparent, so that the edges of the image becomes invisible when the image is used on the web?

Alessandro · Answer 1 · 2020-03-24T13:54:52.537

2

Try this:

convert input.png -bordercolor black -fill white \
   \( -clone 0 -colorize 100 -shave 10x10 -border 10x10 -blur 0x10 \) \
   -compose copyopacity -composite output.png

C#

using (MagickImage mImage = new MagickImage(image))
{
    mImage.Format = MagickFormat.Png;

    using (IMagickImage mask = mImage.Clone())
    {
        mask.Format = MagickFormat.Png;

        mask.BorderColor = MagickColors.Black;
        mask.Colorize(MagickColors.White, new Percentage(100));
        mask.Shave(50, 50);
        mask.Border(50, 50);
        mask.Blur(0, 10);
        mImage.Composite(mask, CompositeOperator.CopyAlpha);

        mImage.Write(image);
        image.Position = 0;
    }
}

Edit:

I will try to put the code in a more script-like fancy so that it's easy for me. I'm sorry if it's not elegant:

var image = new MagickImage("input.jpg");
var mask = image.Clone();
mask.BorderColor = MagickColors.Black;
mask.Colorize(MagickColors.White, new Percentage(100));
mask.Shave(10,10);
mask.Border(10,10);
mask.Blur(0,10);
image.Composite(mask, CompositeOperator.CopyAlpha);
image.Format = MagickFormat.Png;
image.Write("output.png");

edited Mar 24 '20 at 13:54

answered Mar 23 '20 at 14:34

Alessandro

2,848
1
8
16

I'm having problems converting this to C#. Could you help me out? – Bjørn Mar 24 '20 at 09:34
It does not. If I do mask.Write(stream) then I get a white image. If I do image.Write(stream) then I get an identical image to the input image. There are also various typo's. you have written maks.Composite instead of mask.Composite, and MagicksColor.Black instead of MagickColors.Black – Bjørn Mar 24 '20 at 11:20
Update. I had forgotten to change the format of the image to .PNG. I now got something different. This time i got a black and white image, with edges. These edges are blurred (read darker), but without gradient. – Bjørn Mar 24 '20 at 11:25
That's the image you have to use as mask! – Alessandro Mar 24 '20 at 11:33
I saw you updated your code a bit, i tried that, and now i get an identical image to the one that i use as input. In addition. If the edges are blurred, but not gradient, how would that mask then cause a gradient, if it were added? – Bjørn Mar 24 '20 at 11:38
If you take the mask alpha channel it will return a gradient effect on your edges. – Alessandro Mar 24 '20 at 11:58
I have updated your code, so that it compiles, but it still only returns an identical image to what I use as input. I don't know what more to do. – Bjørn Mar 24 '20 at 12:04
yes for me it works. I added a more script-like version. – Alessandro Mar 24 '20 at 13:53

score 2 · Accepted Answer · answered Mar 24 '20 at 20:31

The example is almost correct. It works when the Composite action is removed. The command line example translates to this:

using (var image = new MagickImage("thumbnail.gif"))
{
    // -alpha set
    image.Alpha(AlphaOption.Set);

    // -virtual-pixel transparent
    image.VirtualPixelMethod = VirtualPixelMethod.Transparent;

    // -channel A means that the next operations should only change the alpha channel

    // - blur 0x8
    image.Blur(0, 8, Channels.Alpha);

    // -level 50%,100%
    image.Level(new Percentage(50), new Percentage(100), Channels.Alpha);

    // +channel cancels only allow operations on the alpha channel.

    image.Write("soft_edge.png");
}

MagickImage create soft edge that goes into 100% transparent

2 Answers2

Edit: