Silverlight 3 introduces the WriteableBitmap class and with it, the ability to crop an image programmatically on the client!
All you need to do is create a new instance of the WritableBitmap class as your destination (supplying the dimensions in the constructor). Then create or acquire another instance of the WriteableBitmap class fully loaded with an image (among other ways, you can do this by creating a BitmapSource object from a stream via .SetSource and passing that BitmapSource instance into the constructor of a new WriteableBitmap)
Once you have your source and destination WriteableBitmap classes, just retrieve one pixel at a time from the source instance and set that pixel on a destination instance. The pixels are stored in a property on the object call Pixels which is a 1 dimensional array. Geting the index of a given pixel in an array is simple: index = x + y * width.
In my first pass, I just looped thru pixel by pixel. This was fast but not as fast as using Array.Copy (almost twice as fast)…
private static WriteableBitmap CropImage(WriteableBitmap Source, int XOffset, int YOffset, int Width, int Height)
{
int SourceWidth = Source.PixelWidth;
WriteableBitmap Result = new WriteableBitmap(Width, Height);
for (int y = 0; y <= Height – 1; y++)
{
int SourceIndex = XOffset + (YOffset + y) * SourceWidth;
int DestIndex = y * Width;
Array.Copy(Source.Pixels, SourceIndex, Result.Pixels, DestIndex, Width);
}
return Result;
}
The result (a WriteableBitmap) can then simply be used as the source of an Image control to display your cropped image.
Note: WriteableBitmap.PixelWidth is expensive. Be sure to call it only once if possible.
Possible Improvement: Had the source width and destination width been the same I could have done it in a single call to Array.Copy and presumably made it even faster.
It’s high time that web developers are able to do complicated tasks on the client and not forced to use the server just because the client-side platform doesn’t support it. We’re still not all the way there yet but Silverlight gets us a lot closer than anything before it.
Programmer Payback 
Cropping an image in Silverlight 3 « Programmer Payback…
Thank you for submitting this cool story – Trackback from NewsPeeps…
Thanks for the useful post. But shouldn’t it be:
int SourceIndex = XOffset +( YOffset + y) * SourceWidth;
I have written on the same topic but found this after writing. Interesting to find a different approach to achieve the same thing.
http://blog.blueboxes.co.uk/2009/08/22/how-to-crop-instead-of-clip-in-silverlight/
Rahul, good eye. I had refactored and forgot to re-add the parenthesis.
John, thanks for the link! Interesting approach using the clip property and forcing that result to a writable bitmap. I wonder how the two options compare performance wise.
Just a general note to other readers about the clip property:
Cropping an image via the clip property does have the same visual effect but there is one key difference, the entire image is still loaded in memory. This can help performance if you need to change your clipping region at runtime but it can hurt performance if you need to break a single image up into many smaller images.
Just another comment:
This doesn’t work if the domain you are getting it from doesn’t allow it. It will only work on images from your own domain, or domains that are configured to allow this.
The version John gave the link to will work on every image.
Surprisingly there aren’t many info on this on the web.
Nice
I’ve used the crop function code and its works perfectly fine.
Now, I would like to have a cut function which is similar to the select and cut function we have in mspaint.
i.e. when I crop any section from an image, that cropped section should be removed from the source image.
Exactly way i needed, thanks!
Great code!
How could I save this writtable bitmap to a physical file in the server?
Thanks!
Jesus, check out fjcore (http://code.google.com/p/fjcore/). It’s an open source library that I’ve used before to encode a writeablebitmap to a jpg or png. You could then send those resulting bytes to your server.
This is not working properly.
is there any another code for cropping.
Thanks for the code snippet, I referenced you from my blog.
http://io2gamelabs.blogspot.com/2011/10/code-for-cropping-images-in-silverlight.html
Hope that’s OK.
hi
i want to crop circular and triangle and any arbitrary region in image can I use this code i for rectangular area and it was good
great issues altogether, you just gained
a new reader. What could you suggest about your
pput uup that you simply made a feww daays inn the past?
Any certain?
Other reasons for why AVG won’t install depend on the error messages that youu receive and below are some of the known reasons whyy AVGinstallation will fail.
This saves the user the effort to click oon individual link to download them.
This wiol increase your streaming speed aas well as your
normal surfing ability.
What’s up, this weerkend iis good designed for me,
as this occasion i amm reading this enormous informative paragraph here at my
residence.
I was more than happy to uncover this page.
I need to to thank you for ones time due to this wonderful read!!
I definitely appreciated every little bit of it and i also
have you saved to fav to check out new things on your blog.
The online sites give people so much more
room to decide from and with this almost unlimited choice it should not be difficult to find that
one ideal match for your self. Some questions still need to be answered before the final
vows. They said that women wasted too much time fussing around with a bobbed hairstyle, and if she didn.
What’s up everybody, here every one is sharing these experience, thus it’s pleasant to read this webpage,
and I used to pay a visit this weblog daily.
I was suggested this web site via my cousin. I am now
not certain whether or not this put up is written by way of
him as no one else know such specific about my problem. You’re
wonderful! Thank you!
Hello There. I discovered your weblog using msn. This is a very well written article.
I’ll be sure to bookmark it and come back to learn more of
your helpful info. Thank you for the post. I’ll definitely return.
If you’re looking tto start taking up street photography, this article is for you.
Thee Westie has thhe Terrier coat which is double layered to protect him in the field.
As a matter of fact, you should always have bottled water with you whenever yoou venture outside in the sun.
[…] a new Silverlight 3 we can use a WritableBitmap to do settlement […]