# How to Crop an Image based on a Shape or Path control?

In the last post we discussed “How to Crop an Image using the WriteableBitmap class”. If you didn’t read it yet, first try to understand that before reading this post as we are going to use it in this post very frequently.

Today in this post we are going to learn how to crop an image in different shapes like rectangle, circle or any other different complex shapes programmatically.

First we will need the proper shape to crop the image. That could be any shape control or any complex path control. Once we have that shape or path ready, we can go further to process our image to give a simple or complex shape that we decided.

For this demo, let us take three controls. The first one is a Rectangle shape, the second one is an Ellipse shape and the third one is a complex Path control. Here is the XAML code of that for your reference:

` `
`<Rectangle x:Name="rectangle" Width="100" Height="100" Stroke="Red"/>`
`<Ellipse x:Name="ellipse" Width="100" Height="100" Stroke="Red"/>`
`<Path x:Name="flower" Data="M39.719002,49.903999L27.454459,67.570106 6.1730003,`
`                            70.669006 18.437453,53.002895z M45.763216,47.663001L54.931002,`
`                            67.117103 46.974087,87.096 37.805001,67.643096z M46.844002,`
`                            41.306999L68.275991,43.094764 81.599997,59.977001 60.169409,`
`                            58.189132z M0,27.119998L21.430977,28.90767 34.755001,`
`                            45.788997 13.324224,44.002528z M75.427,16.426999L63.162882,`
`                            34.094039 41.882,37.193 54.146118,19.526059z M34.627251,`
`                            0L43.794003,19.454595 35.835654,39.434001 26.669002,19.979402z" `
`                      Stretch="Uniform" Width="100" Height="100" Margin="0,0,0,0" `
`                      RenderTransformOrigin="0.5,0.5">`
`    <Path.RenderTransform>`
`        <TransformGroup>`
`            <TransformGroup.Children>`
`                <RotateTransform Angle="0" />`
`                <ScaleTransform ScaleX="1" ScaleY="1" />`
`            </TransformGroup.Children>`
`        </TransformGroup>`
`    </Path.RenderTransform>`
`</Path>`

Now once we have the image and the chosen shape ready, we can go to the code behind to process the image. First, we will need to create a WriteableBitmap instance from the image that we have. We already discussed more about it in the following posts:

Now crop the writeable bitmap instance in proper dimension using the method that we created in last post. Here you will get a well shaped cropped image in hand. Then create a new ImageBrush and set the cropped image as the ImageSource of that. Later set the Fill property of the shape control or path control to the image brush and you will get a new well shaped image which can be a complex one based on your provided shape.

### Here is the C# code implementation:

` `
`// create a WriteableBitmap from the original image`
`var writeableBitmap = new WriteableBitmap(image, null);`
` `
`// crop the writeable bitmap based on proper dimension`
`var cropped = CropImage(writeableBitmap, X, Y, WIDTH, HEIGHT);`
` `
`// create an image brush from the cropped image`
`var imageBrush = new ImageBrush`
`{`
`    ImageSource = cropped,`
`    Stretch = Stretch.None`
`};`
` `
`// fill the shape with the image brush that we created`
`shape.Fill = imageBrush;`

### Here is the VB.Net code implementation:

` `
`' create a WriteableBitmap from the original image`
`Dim writeableBitmap = New WriteableBitmap(image, Nothing)`
` `
`' crop the writeable bitmap based on proper dimension`
`Dim cropped = CropImage(writeableBitmap, X, Y, WIDTH, HEIGHT)`
` `
`' create an image brush from the cropped image`
`Dim imageBrush = New ImageBrush() With { _`
`    .ImageSource = cropped, _`
`    .Stretch = Stretch.None _`
`}`
` `
`' fill the shape with the image brush that we created`
`shape.Fill = imageBrush`

This will create the following shaped images for you based on your choice which you can save to your defined location for later use:

I hope that, this post will be definitely help you if you are going to crop an image based on various shapes. This will be as simple as it is if you are going to crop it for any other more complex shapes.

If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Twitter, Facebook, Google+ and LinkedIn. I would love to hear your thoughts and opinions on my articles directly. Also, don't forget to share your views and/or feedback in the comment section below.

1. this post is very interesting
can you show me an example in c# ?

2. Here you have declared three shapes rectangle, ellipse and flower. But there is not any way written how to use those shapes. You have said to use CropImage(WriteableBitmap source, int xOffset, int yOffset, int width, int height) function but then it doesn't take those shape as argument, it just takes height and width then it will be cropped in rectangular shape ONLY. If you attach totally working project in your blog post then it would be better for all us readers. Thanks.

3. Hi,

The CropImage() method just crops the image based on the shape's height and width. Then the following code will take care of what you wanted to achieve:

// create an image brush from the cropped image
var imageBrush = new ImageBrush
{
ImageSource = cropped,
Stretch = Stretch.None
};

// fill the shape with the image brush that we created
shape.Fill = imageBrush;

Let me know, if you still have doubts.

Regards,
Kunal

4. Hey Kunal,

This looks exactly like what I want, but can you supply a working demo, I cannot seem to get it working from your information.

Best
Johann

1. Hi Johann,

If you follow the above article and the referenced articles properly, you will be good to go building the same without any issues.

Regards,
Kunal

5. hi kunal,
this post is very helpful. thanks.
but can you guide me on how to build an arbitrary shape to crop my image i.e. a random figure to cut the image and save as new one. Thanks in advance

© 2008-2017 Kunal-Chowdhury.com - Microsoft Technology Blog for developers and consumers | Designed by Kunal Chowdhury