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:
="1.0"
<configuration>
<configSections>
<section name="imageTemplate"
requirePermission="false"
type="ImageTemplateNet.ImageGenerationConfigurationSectionHandler,
ImageTemplateNet"/>
</configSections>
<imageTemplate config="~/templates/ImageTemplates.config"
imageCacheDir="~/cache"
defaultCacheTimeSeconds="60"
defaultImageDir="~/images">
</imageTemplate>
<system.web>
<httpModules>
<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.
="1.0"
<imageGeneration>
<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>
<imageTemplates>
<template id="productBanner"
configSource="productBanner/image.config">
</template>
<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.