ASP.NET MVC 3 Beta: Simple image manipulations using WebImage helper
First new helper in ASP.NET MVC 3 Beta I blogged about was chart helper. In this posting I will introduce you another cool helper that is called WebImage and that provides you with image manipulation functions. Also this helper is made for web and instead of messing with more complex GDI+ functions you can do a lot of stuff with images very easily.
Source code
You can find source code of this example from Visual Studio 2010 experiments repository at GitHub.
 | Source code repository GitHub |
Sample application demonstrates all the transformations that WebImage can do and you can use my solution to play with WebImage and see how it works. You can find all image stuff from ImageController and related views.
Click on image to see it at original size.
Feel free to download and play with it! :)
WebImage helper class
WebImage helper class let’s you show images in controller actions similarly to chart helper. Here you can see one very simple controller action that displays image.
public void GetImage()
{
new WebImage(ImagePath)
.Write();
}
Note that controller action does not return result. It clears response, and writes image correctly into it. After that content is sent to client and response ends.
I am using ImagePath property because my controller has about nine methods that output image. ImagePath property is defined as follows.
public string ImagePath
{
get
{
var server = ControllerContext.HttpContext.Server;
var imagePath = server.MapPath("~/images/bunny-peanuts.jpg");
return imagePath;
}
}
Image transformations
Right now WebImages provides us with the following image transformations:
- cropping,
- horizontal flip,
- vertical flip,
- resize,
- rotate left,
- rotate right,
- text watermark,
- image watermark.
All these transformations can be also found from my sample application.
Controller actions
Those of you who just want to see the code – here are all the controller actions that output image with some transform.
public void GetCropped()
{
new WebImage(ImagePath)
.Crop(50, 50, 50, 50) // crop 50px from all sides
.Write();
}
public void GetHorizontalFlip()
{
new WebImage(ImagePath)
.FlipHorizontal()
.Write();
}
public void GetVerticalFlip()
{
new WebImage(ImagePath)
.FlipVertical()
.Write();
}
public void GetResized()
{
new WebImage(ImagePath)
.Resize(200, 200) // resize image to 200x200 px
.Write();
}
public void GetRotateLeft()
{
new WebImage(ImagePath)
.RotateLeft()
.Write();
}
public void GetRotateRight()
{
new WebImage(ImagePath)
.RotateRight()
.Write();
}
public void GetTextWatermark()
{
new WebImage(ImagePath)
.AddTextWatermark("Watermark", "white",14,"Bold")
.Write();
}
public void GetImageWatermark()
{
var watermarkPath = HttpContext.Server.MapPath("~/images/watermark.png");
var watermark = new WebImage(watermarkPath);
new WebImage(ImagePath)
.AddImageWatermark(watermark)
.Write();
}
As you can see all these methods are very simple and syntax is very short. By example, compare WebImage.Resize() to clean resize method given in my blog posting Resizing images without loss of quality. All other stuff in GDI+ is similar rocking on code. WebImage saves you from complex and hard to debug GDI+ code.