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
- Visual Studio 2008 and .NET Framework 3.5 SP1
- Microsoft.Web.GeneratedImage.dll
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
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">
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.
