Gunnar Peipman's ASP.NET blog

ASP.NET, C#, SharePoint, SQL Server and general software development topics.

Sponsors

News

 
 
 
DZone MVB

Links

Social

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 @ 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.

OMG! Bunny is flipped!
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.

Comments

hajan said:

Very nice info! :)

Thanks for sharing...

# October 15, 2010 4:27 PM

Tom said:

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 1:16 PM

DigiMortal said:

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.

# May 16, 2011 4:09 PM

JailepplayclE said:

I find myself coming to your blog more and more often to the point where my visits are almost daily now!

# May 24, 2011 2:36 AM

Anna said:

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

Thanks

# June 10, 2011 12:06 AM

shyju said:

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

# February 3, 2012 2:42 PM