Dynamic Images with ImageTemplate.NET

• Download source - 1.6 MB

Introduction

Have you ever had the need to generate images on the fly in your ASP.NET applications? You could use GDI+ to do this directly, but we think we have an easier way. Enter ImageTemplate.NET. ImageTemplate.NET lets you configure an image template in an XML file and then change the image that is generated by passing parameters in the URL.

This is great for dynamically generating images based on database content. ImageTemplate.NET can help you:

• Rotate images
• Generate animated GIFs dynamically
• Generate images from strings so you can use any font you like on your website
• Resize images to create thumbnails

ImageTemplate.NET caches generated images so it performs almost as well as static images.

Background

Basic knowledge of ASP.NET is required to get started with ImageTemplate.NET. The animated GIF generation is done using the component Gif.Components.dll, and some code from Paint.Net is used to help do high quality rotation of images.

Using the code

Simply download the source code to get started with the sample web app.

To host ImageTemplate.NET in your own web application, add these settings to your web.config:

<?xml version="1.0"?>
<configuration>
    <configSections>
        <section name="imageTemplate" 
           requirePermission="false" 
           type="ImageTemplateNet.ImageGenerationConfigurationSectionHandler, 
                 ImageTemplateNet"/>
    </configSections>
    <!-- 
  config = The path to the file where the templates are defined 
  imageCacheDir = The location that images should be cached after being generated. 
                  This can be anywhere the web server has write access to
  defaultCacheTimeSeconds = The amount of time that images should be kept in the cache
  -->
    <imageTemplate config="~/templates/ImageTemplates.config" 
                imageCacheDir="~/cache"
                defaultCacheTimeSeconds="60"
                defaultImageDir="~/images">
    </imageTemplate>
    <system.web>
        <httpModules>
            <!-- If the app is installed as a virtual directory of another 
               ASP.NET website we need to remove the modules so we don't get 
               issues with dlls not being found -->
            <clear/>
        </httpModules>
        <httpHandlers>
            <add verb="GET,HEAD" path="TemplateImageGenerator.axd" 
               type="ImageTemplateNet.Web.Handlers.ImageGenerationHandler, 
                      ImageTemplateNet" validate="false"/>
        </httpHandlers>
    </system.web>
</configuration>

The work of configuring your templates is done in ImageTemplates.config. This is also used to setup the element types which are the bits of code that know how to actually draw the template.

<?xml version="1.0"?>
  <!-- 
  You define your image templates in this file. 
  You may remove any of the <template> elements
  in here you don't want
  -->
  <imageGeneration>
  <!-- The definition of the element types that you can use when building image templates.
  an elementType specifies the bit of code that does the drawing for a template -->
  <elementTypes>
  <elementType id="Panel" 
    elementClass="ImageTemplateNet.PanelTemplateElement" 
    configClass="ImageTemplateNet.PanelElementConfig">

  </elementType>
  <elementType id="Image" 
    elementClass="ImageTemplateNet.ImageTemplateElement" 
    configClass="ImageTemplateNet.ImageElementConfig">

  </elementType>
  <elementType id="Text" 
    elementClass="ImageTemplateNet.TextTemplateElement" 
    configClass="ImageTemplateNet.TextElementConfig">

  </elementType>
  </elementTypes>
  <!--
  Define your imate templates here
  -->
  <imageTemplates>
  <!-- An example of defining a template in another file -->
  <template id="productBanner" 
     configSource="productBanner/image.config">
  </template>

 <!-- An example of defining a template in line -->
  <template id="fontDemo" 
     imageFormat="Jpeg" backgroundColor="#FFFFFF">
  <element id="textArea" x="0" 
     y="0" height="200" type="Text">
  <parameters>
  <DefaultTextStyle>boldArialRed</DefaultTextStyle>
  <FontFamily>Franklin Gothic Demi</FontFamily>
  <FontSize>17</FontSize>
  <ForeColor>#FF0000</ForeColor>
  <Text>Canon IXYuuuuu</Text>
  <Alignment>Near</Alignment>
  <LineAlignment>Near</LineAlignment>
  <Overflow>Expand</Overflow>
  <Bold>true</Bold>
  <Italic>true</Italic>
  <Strikeout>true</Strikeout>
  <Underline>true</Underline>
  </parameters>
  </element>
  </template>
  </imageTemplates>
  </imageGeneration>

To generate an image using the "fontDemo" template, you would use a URL like: /TestWebsite/TemplateImageGenerator.axd?template=fontDemo&textArea.Text=Hello+World.

You could generate an image using the template as a base and then set a different font size using: /TestWebsite/TemplateImageGenerator.axd?template=fontDemo&textArea.Text=Canon+IXYuuuuu&textArea.FontSize=50.

More examples can be found by downloading the code for the article, or at ImageTemplate.Net.

The next article in this series will explain how to write your own image template element types.

History

• 1.1: First public release.