Image Generation in Visual Studio 2005

• Download demo project - 61 Kb

Introduction

Often, the creative group and/or site builders on the project determine that the look and feel needed for a site cannot be handled by mere text and style sheets. This will normally lead to having a number of images that are just text or some text on top of a navigation button. When this occurs the developer could get frustrated with maintenance or site changes because a simple textual change forces the creative designer to get involved again so they can modify or create a new image. If the site is more complex and supports different languages or the images need to be dynamic, the number of buttons and other images gets multiplied.

Leveraging the ImageGenerator class and the DynamicImage web control in ASP.NET 2.0, one can reduce the dependency on the creative department and allow for a more flexible site while still satisfying the branding guidelines. This sample project contains a Default.aspx page that contains a DynamicImage control called diDynamicImage which points to an ImageGenerator file called ImageMaker.asix. ImageMaker.asix reads in the necessary properties and parameters of diDynamicImage and generates an image on the fly. With this architecture the only graphic needed from the creative department would be the background image of the button, and even that is optional.

In order to accommodate the majority of readers out there that don't have Visual Studio 2005 installed I have placed a lot of the code within the article. So hopefully those of you that can't actually work with the solution will get the gist by just reading the article.

Code Walkthrough

DynamicImage Class

The DynamicImage Class renders images from files, databases or code on the requesting browser (MSDN Link). Below is the list of properties and parameters we have specified for the diDynamicImage control.

• ID - ID of the server control
• ImageGeneratorURL- The URL of our ImageGenerator .asix file which will build our image on the fly
• ImageType - Automatic, Jpg, Gif, Bmp, Png
• Height - Height of the image
• Width- Width of the image
• ParameterMode - ImageGenerationStorage (more secure) or QueryString
• ForeColor - The font color of the text
• BackColor - The back ground color of the image (only displays if a background image isn't supplied)

-- Custom Parameters --

• Text - The text that should be displayed
• Font - The font of the text (e.g. Arial, Kristin ITC)
• FontSize - Size of the text
• FontStyle - Style of the font (e.g. Bold, Italic)
• xPoint - Where the text should be located along the X axis (0 is left most)
• yPoint - Where the text should be located along the Y axis (0 is top most)
• Image - Name of the image file that should be used as the background

<asp:DynamicImage ID="diDynamicImage" 
  ImageGeneratorUrl="~/images/ImageMaker.asix" 
  ImageType="Automatic" Height="60px" Width="150px"
  ParameterMode="ImageGenerationStorage" ForeColor="Navy" 
  BackColor="#8080FF" Runat="server">
<Parameters>
<asp:Parameter DefaultValue="Hello World!" Name="Text"></asp:Parameter>
<asp:Parameter DefaultValue="Kristin ITC" Name="Font"></asp:Parameter>
<asp:Parameter DefaultValue="10" Name="FontSize"></asp:Parameter>
<asp:Parameter DefaultValue="Bold" Name="FontStyle"></asp:Parameter>
<asp:Parameter DefaultValue="31" Name="xPoint"></asp:Parameter>
<asp:Parameter DefaultValue="14" Name="yPoint"></asp:Parameter>
<asp:Parameter DefaultValue="pill.jpg" Name="Image"></asp:Parameter>
</Parameters>
</asp:DynamicImage>

ImageGenerator Class:

An ImageGenerator page (.asix file) allows us to dynamically build whatever kind of image we desire. For this article we are just building images that display text but you could easily build an ImageGenerator that helps with reporting or drawing anything as long as it renders an image. Prior to ASP.NET 2.0 you could basically create your own ImageGenerator class by just having an .aspx file stream back the image you are creating, but the new ImageGenerator class available in the next framework release makes our life a little easier.

Our ImageMaker class inherits from the ImageGenerator class and overrides the RenderImage method. The method does the following:

• Set the image size using the height and width properties of the control calling the class
• Get the custom parameters from the control
• Fill the background with either the image passed or a SolidBrush in the color of the BackColor set in the control
• Draw the text onto the canvas using the text that was passed in by the control

<%@ Image Language="C#" Class="ImageMaker" %>

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;

public class ImageMaker : System.Web.UI.Imaging.ImageGenerator
{
    protected override void RenderImage(Graphics g)
    {
        //set bounds of the canvas
        int width = (int)Style.Width.Value;
        int height = (int)Style.Height.Value;
        int w = Math.Max(DefaultWidth, width);
        int h = Math.Max(DefaultHeight, height);
        
        //set parameters;    //set parameters        
        string txt = GetParameter("Text","");
        string file = GetParameter("Image","");
        string fnt = GetParameter("Font", "Arial");
        int fntSize = Int32.Parse(GetParameter("FontSize", "12"));
        FontStyle fntStyle = GetParameter(GetParameter("FontStyle", "Regular"));
        int x = Int32.Parse(GetParameter("xPoint", "0"));
        int y = Int32.Parse(GetParameter("yPoint", "0"));

        //fill the background
        //if a file isn't supplied or is supplied incorrectly then
        //the background is painted using the color supplied by property
        try
        {
            if (file.Length > 0)
            {
                //Image image = new Bitmap("C:\\WebSites\\acom1\\images\\" + file);
                Image image = new Bitmap(Server.MapPath("") + "\\" + file);
                TextureBrush bgBrush = new TextureBrush(image);
                g.FillRectangle(bgBrush, g.ClipBounds);
            }
            else
            {
                SolidBrush bgBrush = new SolidBrush(Style.BackColor);
                g.FillRectangle(bgBrush, g.ClipBounds);
            }
        }
        catch (System.Exception e)
        {
            SolidBrush bgBrush = new SolidBrush(Style.BackColor);
            g.FillRectangle(bgBrush, g.ClipBounds);
        }

        //overlay the text
        SolidBrush textcolor = new SolidBrush(Style.ForeColor);
        g.DrawString(txt, new Font(fnt, fntSize,fntStyle), textcolor,x, y);

    }

Utility Methods:

I did a little refactoring and extracted some of the parameter retrieval into their own methods. The string GetParameter checks for the parameter in the querystring and then the parameter collection if the querystring was empty. The FontStyle GetParameter method basically converts the FontStyle parameter string into a FontStyle object

//grab the parameters out of the parameters collection or the querystring
   private string GetParameter(string name, string defaultValue)
   {
       string s = defaultValue;
       if (Parameters.Count == 0)
       {
           string t = Request[name];
           if ((null != t) && (t.Length > 0))
           {
               s = t;
           }
       }
       else
       {
           if (null != Parameters[name])
           {
               s = Parameters[name].ToString();
           }
       }
       return s;
   }

   //convert the string style to a FontStyle object
   private FontStyle GetParameter(string inStyle)
   {
       FontStyle fntStyle = FontStyle.Regular;
       switch (inStyle)
       {
           case "Regular":
               fntStyle = FontStyle.Regular;
               break;
           case "Bold":
               fntStyle = FontStyle.Bold;
               break;
           case "Italic":
               fntStyle = FontStyle.Italic;
               break;
           case "Underline":
               fntStyle = FontStyle.Underline;
               break;
           case "Strikeout":
               fntStyle = FontStyle.Strikeout;
               break;
       }
       return fntStyle;
   }

Points of Interest

This is really just the tip of the iceberg of what is possible. I wanted to keep it simple and in the intermediate category. Some of my planned uses for this approach (when VS.NET 2005 is out of beta) is to use the new Theme and Skin features as well as resource files to apply different looks and languages to the images being displayed.

To get at the DynamicImage parameters through code you would simply do something like:

• diDynamicImage.Parameters["Text"].DefaultValue = "Code Behind";.

History

• 7/29/2004 - article submitted