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. Stay connected with me on Twitter, Facebook and Google+ for any kind of discussion. Also subscribed to my blog’s RSS feed and email newsletter to get regular updates directly to your inbox.


5 comments

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

    ReplyDelete
  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.

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
    Replies
    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

      Delete


 
© 2008-2014 Kunal-Chowdhury.com | Designed by Kunal Chowdhury
Back to top