Create LinkedIn-style Rounded Profile Pictures Using an Imaging API with .NET Core

April 10 2019

The GrapeCity Imaging API provides an abundance of image processing features that help to edit and improve image quality. Creating round edged pictures is one feature that gives images a smooth and neat look.

For example, in social networking or mailing applications, profile pictures are generally rounded. Keeping this trend in mind, we'll demonstrate how to clip and create a rounded image from a regular image. This image can be further used across various applications.

BEFORE:

AFTER:

With the GcImaging API, we use a clip region on the Renderer property of GcBitmap instance to cut out a round fragment from a larger picture. We then downsize it and render it into a random location in the final image. This generates a new bitmap image with round edges.

This is how it's done:

Initialize the image to be used in GcBitmap instance

  var bmpSrc = new GcBitmap(Path.Combine("Resources", "woman-brick-wall.jpg"))

Ensure that the source and target opacity match
```
  bmpSrc.Opaque = opaque;
```
where opaque is true.
Specify the coordinates and size of the clipping in the source image
```
  const int x = 50, y = 0, w = 900, h = 900;
```

Create a clipping region, excluding all outside of the specified circle

  var rgn = new Region(new RectangularFigure(0, 0, bmpSrc.PixelWidth, bmpSrc.PixelHeight));
  var ellipse = new EllipticFigure(x, y, w, h);
  rgn.CombineWithRegion(new Region(ellipse), RegionCombineMode.Exclude, false);

To clip using a Region, we use the BitmapRenderer class's instance by Renderer property of GcBitmap

  var renderer = bmpSrc.Renderer;
  renderer.ClipRegion = rgn;
  renderer.Clear(Color.Transparent);

Clip and Resize the image based on the specified bounds to finally generate a new round-edged image

var size = rnd.Next(minSize, maxSize);     using (var bmpRound = bmpSrc.Clip(new Rectangle(x, y, w, h)))
        using (var bmpSmall = bmpRound.Resize(size, size))
          {
              var bmp = new GcBitmap(pixelWidth, pixelHeight, opaque, dpiX, dpiY);
              bmp.Clear(Color.Transparent);
              bmp.BitBlt(bmpSmall,
                  rnd.Next(pad, pixelWidth - pad - bmpSmall.PixelWidth),
                  rnd.Next(pad, pixelHeight - pad - bottom - bmpSmall.PixelHeight));
              return bmp;
          }

You have successfully transformed a regular picture into a rounded image.

Let us know where you require round-edged pictures and how GcImaging proves helpful to you by leaving a comment below.

Download the sample to refer to the code.

Download Now!