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:

Cropped Image based on Rectangle Shape Cropped Image based on Circle Shape Cropped Image based on any Path

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.

In case any trouble, drop a line with your queries and I will try to help you at the earliest. Happy coding.

Have a question? Or, a comment? Let's Discuss it below...

Thank you for visiting our website!

We value your engagement and would love to hear your thoughts. Don't forget to leave a comment below to share your feedback, opinions, or questions.

We believe in fostering an interactive and inclusive community, and your comments play a crucial role in creating that environment.

Silverlight

SilverlightTips

WP7DEV

WP7Tips

WP8Dev

XAML

XAMLTips