Crop Image In Shape In Silverlight 4


Introduction

In this article we would see, how we can crop an image with a shape. In this sample we would use a rectangle shape to crop the image. This article would be helpful for those starting an image editor in Silverlight.

Prerequisites

We definitely need Silverlight 4 SDK installed; along with we need following tools from Codeplex:

  1. Image Tools – Click Here
  2. WritableBitmapEx – Click Here
  3. Scroll Inertia Behavior – Click Here

We would start creating a Silverlight project.

 

Then first thing we would do is add the following references:

We would follow MVVM pattern, hence using the MvvmLight assembly.

So basically what the application should do:

  1. Open an existing image from file system.
  2. Enable Cropping
  3. Configurable Rectangle Size.
  4. Crop (Save as png image)
  5. Display all the cropped images in History.

Our, view should be simple enough for doing all the above things.

The above image is the Toolbar of the dashboard we are using.

We would create the temporary directory where we would put all those cropped images.

At the same time we would load any image if already cropped and saved.

As you see above we are updating the property CutFiles to have the list of files.

Now, we would open an image file from the file system. This is easy.

“ImageGrid” is a Grid control available in the ViewModel, which would be referenced to the Grid Control used in the View. So we can add, clear its children from ViewModel.

For clearing history, we have the following method associated to a Command.

To save the cropped image to temp location the following method is used. This is also associated with Command.

 

In the view, we would do the basic ViewModel binding and the initialization of the Grid control and the Cropping rectangle.

As we are using the InertiaBehavior, we need to handle the it in the MouseWheel event handler. As follows:

The above is used for zooming in and zooming out of the image.

The above code is important, where we are cropping the background image and fill it to the cropping rectangle.

On moving the rectangle (dragging), we need to capture the updated background, so we are clearing the Fill and giving it a SolidColorBrush of Transparent color.

Similarly, we should hide the cropping rectangle whenever the size of the rectangle is changed.

On reset click, we are resetting the scale translation to its original values.

A cropping rectangle in the view would look like following:

Now, we would run the project and start with opening the image.

 

The image is opened in the application. Also the respective controls (Cut, Capture, etc..) are enabled.

Now, we would start capturing. Click on the check box “Capture”.

The default/minimum width of the square rectangle is provided as 32, and maximum as 512, the increment is given as 16.

As we drag the rectangle, the X and Y co-ordinates are changed. At this point we are doing the MouseLeftButtonUp event handler.

We would increase the size of the rectangle and start capturing (saving) the images.

As you see in the above image, some crops are done, as soon as it’s done; we are able to see it in the history.

If you browse to the temp location where all the images are stored, you would find all those images.

That’s it. We have successfully captured/cropped images and saved them. Hope you like it. Keep reading.

Source Code: Click here

Article as PDF: Click Here

My Codeplex Projects

 

1) Auto Power Switch

2) Auto Wall

3) Visual Studio Cleaner

4) Application Scheduler

 

About these ads