ASP.NET MVC 3: Building simple image editor using WebImage helper

In my previous posting about WebImage helper I introduced how to use WebImage for different image manipulations. In this posting I will show you how to build simple online image editor using WebImage helper.

Here you can see the screenshot of simple image editor.

Simple image workshop

Four simple operations is enough for current example.

Building editor view

Before going to controller that is extremely simple – believe me, it is no-brainer – let’s take a look at view. The editor is made up from following parts:

  • image tag that shows image with current effects,
  • effects checkboxes,
  • JavaScript that requests image with selected effects from server.

Here is the view.

<%@ Page Title="Image Worksop" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
   
Inherits="System.Web.Mvc.ViewPage<dynamic>"
 %>
 

<asp:Content ID="Content4" ContentPlaceHolderID="TitleContent" runat="server">
    Image Workshop
</asp:Content>
 
<asp:Content ID="Content5" ContentPlaceHolderID="MainContent" runat="server">
   
   
<script type="text/javascript">
        function
updateImage() {
           
var req = '/ImageWorkshop/GetImage?'
;
           
var query = ''
;

           
if ($('#HorizontalFlip').is(':checked'
))
                query +=
'&HorizontalFlip=1'
;
           
if ($('#VerticalFlip').is(':checked'
))
                query +=
'&VerticalFlip=1'
;
           
if ($('#RotateLeft').is(':checked'
))
                query +=
'&RotateLeft=1'
;
           
if ($('#RotateRight').is(':checked'
))
                query +=
'&RotateRight=1'
;

            req += query.substr(1);
            $(
'#image').attr("src"
, req);
        }
   
</script>
 
   
<h2>Image Workshop</h2>
 
    <% using(Html.BeginForm()) { %>
       
<table border="0" cellpadding="0" cellspacing="5">
        <tr>
        <td valign="top" rowspan="10">
            <img src="/ImageWorkshop/GetImage"  id="image" alt="" />
        </td>
        <td valign="middle"><input type="checkbox" id="HorizontalFlip" value="1" />
            Flip horizontally</td>
        </tr>
        <tr>
        <td valign="middle"><input type="checkbox" id="VerticalFlip" value="true" />
            Flip vertically</td>
        </tr>
        <tr>
        <td valign="middle"><input type="checkbox" id="RotateLeft" value="true" />
            Rotate left</td>
        </tr>
        <tr>
        <td valign="middle"><input type="checkbox" id="RotateRight" value="true" />
            Rotate right</td>
        </tr>
        <tr>
        <td><input type="button" value="Preview" onclick="updateImage()" /></td>
        </tr>
        </table>
    <% } %>
</asp:Content
>

The JavaScript function updateImage() checks what checkboxes are checked and creates query string for GetImage controller action. This query string contains values only for applied effects.

Controller actions

When you take a look at image definition in view you can see that we need two separate actions – one that returns editor view and the other that returns image. I said before that controller is extremely simple. Don’t mind my not so nice solution for image action – it is my working draft.

public class ImageWorkshopController : Controller
{
    [
HttpGet
]
   
public ActionResult
Index()
    {
       
return
View();
    }

   
public void GetImage(string horizontalFlip = "", string verticalFlip = ""
,
                       
string rotateLeft = "", string rotateRight = ""
)
    {
       
var imagePath = Server.MapPath("~/images/bunny-peanuts.jpg"
);
       
var image = new WebImage
(imagePath);

       
if (!string
.IsNullOrWhiteSpace(verticalFlip))
            image = image.FlipVertical();
       
if (!string
.IsNullOrWhiteSpace(horizontalFlip))
            image = image.FlipHorizontal();
       
if (!string
.IsNullOrWhiteSpace(rotateLeft))
            image = image.RotateLeft();
       
if (!string.IsNullOrWhiteSpace(rotateRight))
            image = image.RotateRight();

        image.Write();
    }
}

Applying effects to image is very easy. We just check the values sent from view and apply the effect only if appropriate value is not null or empty string. That’s why I created query string with effect values as ones ("1") in JavaScript.

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.

    4 thoughts on “ASP.NET MVC 3: Building simple image editor using WebImage helper

    • October 31, 2010 at 4:10 pm
      Permalink

      The above works, but you could leverage some more jquery to clean it up a bit.

      var url = ‘/ImageWorkshop/GetImage’;
      var options = {
      HorizontalFlip: $(‘#HorizontalFlip’).is(‘:checked’),
      VerticalFlip: $(‘#VerticalFlip’).is(‘:checked’),
      RotateLeft: $(‘#RotateLeft’).is(‘:checked’),
      RotateRight: $(‘#RotateRight’).is(‘:checked’)
      };
      url = url + $.param(options);
      $(‘#image’).attr(“src”, url);

      Then in your action you can have boolean parameters.

      public void GetImage(bool horizontalFlip, bool verticalFlip, bool rotateLeft, bool rotateRight)
      {
      var imagePath = Server.MapPath(“~/images/bunny-peanuts.jpg”);
      var image = new WebImage(imagePath);

      if (verticalFlip)
      image = image.FlipVertical();
      if (horizontalFlip)
      image = image.FlipHorizontal();
      if (rotateLeft)
      image = image.RotateLeft();
      if (rotateRight)
      image = image.RotateRight();

      image.Write();
      }

    • January 9, 2011 at 1:18 pm
      Permalink

      I’ve found that when using with PNG images with alpha transparency the result of the transformation is rendered with black background or with bad distortions; that problem happens only with transparent PNG, other file formats are ok.

      This is a bug or there is a way to fixit?

    • January 31, 2011 at 9:08 pm
      Permalink

      I am not very sure about how this functionality is implemented internally. If it is possible then please report this issue to ASP.NET MVC forum or better yet to Connect site.

    • March 28, 2011 at 3:10 pm
      Permalink

      Hi, im using IIS7 and i can’t see the captcha image. Someone knows why? I think that GetImage action is not found. Then i try this with server created on VisualStudio – everything is ok, image is displayed.

    Leave a Reply

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