Click here to Skip to main content
Click here to Skip to main content
Technical Blog

ASP.NET MVC ImageHandler for Thumbnails

, 7 Oct 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
Handling all your images through a custom ActionResult/Controller.

Introduction

As some of you might know, I am a really big fan of community-driven technologies. I also like to contribute myself in order to exchange new ideas and meet new people with common interests. Since I am quite new to ASP.NET MVC, I was thinking I would submit my first contribution: handling all your images through a custom ActionResult/Controller. This allows me to do several things:

  • uniform access to images
  • possibility for custom types (this example always renders as PNG)
  • generation of thumbnails.

The Code

Let's start with the code for the ActionResult (initially inspired by/copy-pasted from this, but since the new RC, it is my own code):

using System.IO;
using System.Web.Mvc;
using System.Drawing;
using System.Drawing.Imaging;

namespace Be.Corebvba.MVC
{
  public class ImageResult : FileStreamResult 
  { 
    public ImageResult(Image input):this(input,input.Width,input.Height) { } 
    public ImageResult(Image input, int width,int height) : 
       base(
         GetMemoryStream(input,width,height,ImageFormat.Png),
         "image/png") 
   { } 

    static MemoryStream GetMemoryStream(Image input,int width, 
                        int height,ImageFormat fmt) 
    { 
       // maintain aspect ratio 
       if (input.Width > input.Height) 
          height = input.Height * width / input.Width; 
       else 
          width = input.Width * height / input.Height; 
       
       var bmp = new Bitmap(input, width, height); 
       var ms = new MemoryStream();
       bmp.Save(ms, ImageFormat.Png); 
       ms.Position = 0; 
       return ms; 
     } 
   } 
}

The code for the controller is pretty straightforward as well:

public ActionResult ThumbImage(int id,int width,int height)
{
   var d = _rDocument.GetById(id);
   Image i=null;
   try
   {
      i = Image.FromFile(d.PhysicalFilename);
      return new Be.Corebvba.MVC.ImageResult(i, width, height);
   }
   catch (Exception ex)
   {
      i = new Bitmap(1, 1);
      return new Be.Corebvba.MVC.ImageResult(i,1,1);
   }
   finally
   {
      if (i != null) i.Dispose();
   }
}

This does need some better error handling, but I suppose you get the idea... (The _rDocument is a pointer to a Document repository which stores physical files.) If you access your images from a database, you could simply use Image.FromStream instead of an Image.FromFile. In my document, I reference the image as follows, et voila, automatic thumbnails:

<% var imgurl = Url.Action("ThumbImage", "Documents", 
                new { id = d.ID,width=100,height=100 }); %>
<img src="<%=imgurl %>" style="float:left"/>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tom Janssens
Founder Core bvba
Belgium Belgium
Tom Janssens, owner of Core, a software and consultancy company.
Father of two sons named Quinten & Matisse, and married to a beautiful woman named Liesbeth.
 
Blog: http://tojans.me
Github: http://github.com/ToJans
Twitter: http://twitter.com/ToJans
LinkedIn: http://www.linkedin.com/in/tomjanssens

Comments and Discussions

 
QuestionDispose Bitmap Pinmemberwout de zeeuw25-Sep-12 0:50 
AnswerRe: Dispose Bitmap PinmemberTom Janssens25-Sep-12 1:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1411023.1 | Last Updated 7 Oct 2009
Article Copyright 2009 by Tom Janssens
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid