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.

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.

Flipped bunny

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.

Liked this post? Empower your friends by sharing it!

Gunnar Peipman

Gunnar Peipman is ASP.NET, Azure and SharePoint fan, Estonian Microsoft user group leader, blogger, conference speaker, teacher, and tech maniac. Since 2008 he is Microsoft MVP specialized on ASP.NET.

    7 thoughts on “ASP.NET MVC 3 Beta: Simple image manipulations using WebImage helper

    • October 5, 2010 at 8:27 pm
      Permalink

      Very nice info! :)
      Thanks for sharing…

    • May 16, 2011 at 5:16 pm
      Permalink

      One of the requirements is to be able to crop, rotate etc. images within an application
      This is a Visual Studio 2010 4.0 net framework web application. Thus ASP.NET with C#
      Okay. Could this be used for Enterprise level, and be robust and scalable. We are going to be dealing with 1000s of images.

      Any thoughts on the performance / reliability / scalability / and flexibility?
      Thanks , Tom

    • May 16, 2011 at 8:09 pm
      Permalink

      Hi Tom!

      Thanks for question. I have made no comparisons between this helper and other graphics manipulation methods. Also I have made no comparisons between different graphic libraries.

      If you are building something serious that must scale well I suggest you to also look for special solutions and services.

    • June 10, 2011 at 4:06 am
      Permalink

      Great. That’s what i am still looking for my project.

      Thanks

    • February 3, 2012 at 7:42 pm
      Permalink

      Resize method gives me an image where the quality is not good as the orginal.

    • Pingback:ASP.NET MVC 3 Beta: Using WebMail helper to send e-mail | Gunnar Peipman - Programming Blog

    • Pingback:ASP.NET MVC 3: Building simple image editor using WebImage helper | Gunnar Peipman - Programming Blog

    Leave a Reply

    Your email address will not be published. Required fields are marked *