Generate Smooth White Border Around Circular Image

Question

I'm using pgmagick to generate a circular thumbnail. I'm using a process similar to the one discussed here, which does indeed produce a nice circular thumbnail for me. However, I need a white border around the radius of the circle.

My initial approach was to create a new image of a slightly larger white circle with a transparent background and composite the thumbnail over that, letting the white circle "peak out" from under the thumbnail and create a border effect. Here's the pgmagick code I used to achieve that:

border_background = Image(Geometry(220, 220), Color('transparent'))
drawer = Draw()
drawer.circle(110, 110, 33.75, 33.75)
drawer.fill_color(Color('white'))
drawer.stroke_antialias(False)
border_background.draw(drawer.drawer)
border_background.composite(original_thumbnail, 0, 0, CompositeOperator.OverCompositeOp)

This 'works', but the surrounding white border is fairly distorted with choppy edges -- not production ready. If I take drawer.stroke_antialias(False) out, it's even worse.

Any ideas on making this border smoother using pgmagick?

Glenn Randers-Pehrson · Accepted Answer · 2014-04-08T16:32:12.647

I leave it as a simple exercise for the reader to convert this solution from commandline to pgmagick (see more below). The code underlying pgmagick is the same as that used by the commandline.

You could draw the circle larger and then "resize" it down. This ameliorates the jaggy look of the circle by averaging the edge with the surrounding background during the resizing operation.

Instead of

gm convert -size 220x220 xc:none -fill white \
       -draw "circle 110,110, 33.75,33.75" \
       original.png

Do this:

gm convert -size 880x880 xc:none -fill white \
       -draw "circle 440,440, 135,135" \
       -resize 25% resized.png

You could try other sizes and decide which is the smallest that satisfies you, e.g.,

gm convert -size 440x440 xc:none -fill white \
       -draw "circle 220,220, 67.5,65.5" \
       -resize 50% resized.png

This commandline works on both GraphicsMagick ("gm convert") and ImageMagick ("convert")

Looking at the pgmagick documentation at http://pgmagick.readthedocs.org/en/latest/cookbook.html#scaling-a-image it is not clear that pgmagick offers "resize". The documentation shows "img.scale" which will probably result in a jaggy circle. Using "-scale" on the commandline examples above instead of "-resize" does indeed produce the same jaggy image.

pgmagick does however allow you to specify the filter type, as in

 img.scale((150, 100), 'lanczos')

which should be equivalent to "-resize" and is what you want.

score 5 · Answer 2 · answered Apr 08 '14 at 13:10

You will get a better result if you choose a different approach:

# First draw the thumbnail inside the circle.
background = Image(Geometry(220, 220), Color('transparent'))
drawer = Draw()
drawer.circle(110, 110, 33.75, 33.75)
drawer.fill_color(Color('white'))
background.draw(drawer.drawer)
background.composite(original_thumbnail, 0, 0, CompositeOperator.InCompositeOp)

# Draw only the border of the circle on top of the thumbnail inside the circle
border = Image(Geometry(220, 220), Color('transparent'))
drawer.fill_color(Color('transparent'))
drawer.stroke_color(Color('white'))
drawer.stroke_width(3)
border.draw(drawer.drawer)
background.composite(border, 0, 0, CompositeOperator.OverCompositeOp)

Generate Smooth White Border Around Circular Image

2 Answers2