July 12, 2009 3:56 pm
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.
Posted by Tim Greenfield
Categories: Silverlight tips and tricks
Tags: Image manipulation, silverlight, Silverlight 3, Silverlight tips and tricks, WriteableBitmap
Mobile Site | Full Site
Get a free blog at WordPress.com Theme: WordPress Mobile Edition by Alex King.
Cropping an image in Silverlight 3 « Programmer Payback…
Thank you for submitting this cool story – Trackback from NewsPeeps…
By NewsPeeps on July 17, 2009 at 4:39 pm
Thanks for the useful post. But shouldn’t it be:
int SourceIndex = XOffset +( YOffset + y) * SourceWidth;
By Rahul on August 1, 2009 at 10:57 pm
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/
By John on August 22, 2009 at 4:46 pm
Rahul, good eye. I had refactored and forgot to re-add the parenthesis.
By Tim Greenfield on August 22, 2009 at 5:37 pm
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.
By Tim Greenfield on August 22, 2009 at 5:41 pm
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.
By trunck on May 5, 2010 at 7:52 pm
Nice
By Abdul Rauf on June 28, 2010 at 11:12 am
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.
By Hitesh on September 15, 2010 at 3:23 pm
Exactly way i needed, thanks!
By Rodrigo on November 16, 2010 at 7:04 am
Great code!
How could I save this writtable bitmap to a physical file in the server?
Thanks!
By Jesus on March 23, 2011 at 11:51 am
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.
By Tim Greenfield on March 23, 2011 at 3:15 pm
This is not working properly.
is there any another code for cropping.
By jitendra on May 7, 2011 at 9:42 am
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.
By Johan Karlsson on October 10, 2011 at 7:22 pm
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
By 10719214 on November 4, 2011 at 10:13 pm
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?
By Home Improvement Ideas on June 8, 2014 at 3:20 am
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.
By download tool on July 17, 2014 at 3:06 pm
What’s up, this weerkend iis good designed for me,
as this occasion i amm reading this enormous informative paragraph here at my
residence.
By Maxx Jones on July 28, 2014 at 2:43 am
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.
By Eugenia on July 30, 2014 at 3:10 pm
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.
By القصة on August 5, 2014 at 5:16 pm
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.
By monster energy clothing on August 6, 2014 at 2:32 pm
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!
By Reliable Snow plowing on August 20, 2014 at 12:27 am
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.
By Best Vines Compilation - August 2014 on August 23, 2014 at 9:33 am
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.
By graffiti on August 24, 2014 at 3:48 am
[…] a new Silverlight 3 we can use a WritableBitmap to do settlement […]
By How do we mountain an settlement in Expression Blend? - Adriano on September 7, 2014 at 6:30 pm