What's the best way of displaying thumbnails in ASP.NET?

Question

I'm creating a regular gallery in ASP.NET but I have little experiences with creation of thumbnails. I know the algorithms and the GetThumbnailImage method, but my problem is somewhere else - I'm currently displaying the images (just resized) using the ImageButton control. And that's the point - I have no idea how to hook up the "thumbnailed" image to the ImageUrl property. Is it even possible and if yes, how? Or should I use some other control instead? Thanks for any suggestions!

Answer 1

You can create a HttpHandler which handles image requests and returns thumbnails (or does whatever you need on the images).

Whenever you do graphics stuff in ASP.NET, keep in mind that almost all of System.Drawing is a wrapper for GDI+ and thetrefore holds references to unmanaged memory which needs to be disposed properly (use the using statement). This holds true even for simple classes like StringFormat etc.

Answer 2

It sounds like you need to set up an HttpHandler, which would create the resized image and probably cache it to disk as well, to save having to recreate the thumbnail on each request.

So, for example:

<asp:ImageButton ID="ImageButton1" ImageUrl="~/ImageHandler.ashx?ImageId=123" runat="server />

You would then have a handler:

namespace MyProject
{
    public class ImageHandler : IHttpHandler
    {
        public virtual void ProcessRequest(HttpContext context)
        {
            // 1. Get querystring parameter
            // 2. Check if resized image is in cache
            // 3. If not, create it and cache to disk
            // 5. Send the image

            // Example Below
            // -------------

            // Get ID from querystring
            string id = context.Request.QueryString.Get("ImageId");

            // Construct path to cached thumbnail file
            string path = context.Server.MapPath("~/ImageCache/" + id + ".jpg");

            // Create the file if it doesn't exist already
            if (!File.Exists(path))
                CreateThumbnailImage(id);

            // Set content-type, content-length, etc headers

            // Send the file
            Response.TransmitFile(path);
        }

        public virtual bool IsReusable
        {
            get { return true; }
        }
    }
}

You'd also need to set this up in web.config

<system.web>
    <httpHandlers>
        <add verb="*" path="ImageHandler.ashx" type="MyProject.ImageHandler, MyProject"/>
    </httpHandlers>
</system.web>

This should be enough to get you started. You'll need to modify the ProcessRequest method to create the thumbnail, but you mentioned having taken care of this already. You'll also need to make sure that you set the headers correctly when transmitting the file to the browser.

Answer 3

Http Handler is the way to go.

Another note on performance: manipulating images is expensive relative to disk space, both from a memory and cpu standpoint. Therefore generating the thumbnail from a full image is is something you only want to do once for each full image. The best time to do it is probably at the time where the image is uploaded, especially if you will be showing a number of these on the same page.