Working with the New ASP.NET GeneratedImage Control

asp:Feature

Working with the New ASP.NET GeneratedImage Control

By Joydip Kanjilal

The ASP.NET GeneratedImage control—added in ASP.NET 3.5—can be used to display static or dynamic images seamlessly in ASP.NET web pages. This article takes a brief look at how this control can be used in your ASP.NET applications.

Pre-Requisites

You can download the ASP.NET GeneratedImage control from: http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16449.

Getting Started

To use this control, first create a new ASP.NET web project. Next, switch to Design View mode of the Default.aspx file. Choose the control in the toolbox, as shown in the image shown in Figure 1.

Figure 1: Choose the control

Once you've added the control, it shows up in your toolbox (as shown in Figure 2).

Figure 2: The GeneratedImage control in your toolbox

Next, drag and drop a GeneratedImage control from the toolbox on to a form. After you drag and drop this control from the toolbox, the markup code will look like this:

 ImageHandlerUrl="~/ImageHandler1.ashx">

Generating the ImageHandler

The next step is to generate the ImageHandler. To do this, click on the CreateImage handler link on the control, as shown in Figure 3.

Figure 3: Generate the ImageHandler

When you generate the ImageHandler, the code will look like this:

<%@ WebHandler Language="C#" Class="ImageHandler1" %>

using System;

using System.Collections.Specialized;

using System.Drawing;

using System.Web;

using Microsoft.Web;

public class ImageHandler1 : ImageHandler

{

  public ImageHandler1() {

    // Set caching settings and add image transformations here

    // EnableServerCache = true;

  }

  public override ImageInfo GenerateImage(NameValueCollection parameters) {

    // Add image generation logic here and return an instance of ImageInfo

    throw new NotImplementedException();

    }

}

All you need to do is create your own implementation of the GenerateImage method by overriding it. Here's how you can get it to display text in an image in your ASP.NET web page:

public override ImageInfo GenerateImage(NameValueCollection parameters)

  {

    Bitmap bitmap = new Bitmap(230, 30);

    Graphics graphics = Graphics.FromImage(bitmap);

    graphics.Clear(Color.CadetBlue);

    graphics.DrawString(parameters["MyImageParameter"],

    new Font(FontFamily.GenericSansSerif, 16), Brushes.White, 0, 0);

    return new ImageInfo(bitmap);

  }

The ImageHandler class belongs to the Microsoft.Web namespace. Here s a quick look at the ImageHandler class:

namespace Microsoft.Web

{

  public abstract class ImageHandler : IHttpHandler

  {

    protected ImageHandler();

    public TimeSpan ClientCacheExpiration { get; set; }

    public ImageFormat ContentType { get; set; }

    public bool EnableClientCache { get; set; }

    public bool EnableServerCache { get; set; }

    protected List ImageTransforms { get; }

    public virtual bool IsReusable { get; }

    public abstract ImageInfo GenerateImage(NameValueCollection parameters);

    public void ProcessRequest(HttpContext context);

  }

}

Here s the complete markup code of the Default.aspx file:

<%@ Page Language="C#" AutoEventWireup="true"

 CodeBehind="Default.aspx.cs" Inherits="aspnetPro._Default" %>

<%@ Register Assembly="Microsoft.Web.GeneratedImage"

 Namespace="Microsoft.Web" TagPrefix="cc1" %>

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     ImageHandlerUrl="~/ImageHandler1.ashx">            

And here s the complete code of the ImageHandler we just created:

<%@ WebHandler Language="C#" Class="ImageHandler1" %>

using System;

using System.Collections.Specialized;

using System.Drawing;

using System.Web;

using Microsoft.Web;

public class ImageHandler1 : ImageHandler {

  public ImageHandler1() {

    this.ContentType = System.Drawing.Imaging.ImageFormat.Png;

  }

  public override ImageInfo GenerateImage(NameValueCollection parameters)

  {

    Bitmap bitmap = new Bitmap(230, 30);

    Graphics graphics = Graphics.FromImage(bitmap);

    graphics.Clear(Color.CadetBlue);

    graphics.DrawString(parameters["MyImageParameter"],

     new Font(FontFamily.GenericSansSerif, 16), Brushes.White, 0, 0);

    return new ImageInfo(bitmap);

  }

}

When you execute the application, the output looks like that shown in Figure 4.

Figure 4: Output after executing the application

Reading and Displaying Images from a Database

You can also use this control to read and display images stored in a database. Here s a method that illustrates how you can achieve this:

public override ImageInfo GenerateImage(NameValueCollection parameters)

{

  String imageID = parameters["MyImageParameter"];

  String connectionString = ""; //Some connection string

   used to connect to the database

  SqlConnection sqlConnection = new SqlConnection(connectionString);

  sqlConnection.Open();

  SqlCommand sqlCommand = new SqlCommand("select EmployeeImage from Employee

   where ImageID=" + imageID, sqlConnection);

  SqlDataReader sqlDataReader = sqlCommand.ExecuteReader();

  sqlDataReader.Read();

  return new ImageInfo((Byte[])sqlDataReader[0]);

}

The image id can be passed as a parameter using the Parameters collection of the control from the .aspx file, as shown here:

 ImageHandlerUrl="~/MyHandler1.ashx">   

Conclusion

This article took a brief look at how you can use the ASP.NET GeneratedImage control to display images in your ASP.NET web pages. Happy reading!

Suggested Readings

http://www.codedigest.com/Articles/ASPNET/119_New_Image_Generator_control_in_ASPNet_35.aspx

http://www.hanselman.com/blog/ASPNETFuturesGeneratingDynamicImagesWithHttpHandlersGetsEasier.aspx

Joydip Kanjilal ([email protected]) is a Microsoft MVP in ASP.NET. He has more than 12 years of industry experience in IT with more than six years in Microsoft .NET and its related technologies.