Dynamic Images with ImageTemplate.NET

• Download source - 1747 Kb

Introduction

Have you ever had the need to generate images on the fly in your ASP.NET applications? You could use GDI.NET 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 PaintDotNet 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

History

1.1 First Public Release

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.

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

(Refresh)

-- There are no messages in this forum --