使用 ImageTemplate.NET 创建动态图像

• 下载源代码 - 1.6 MB

引言

你是否需要在你的 ASP.NET 程序中动态生成图像？ 你可以直接使用 GDI+，但我们认为我们有一个更简单的方法。 就是 ImageTemplate.NET。 ImageTemplate.NET 让你可以在 XML 文件中配置图像模板，然后通过在 URL 中传递参数来更改生成的图像。

这非常适合基于数据库内容动态生成图像。 ImageTemplate.NET 可以帮助你

• 旋转图像
• 动态生成动画 GIF
• 从字符串生成图像，这样你就可以在你的网站上使用任何你喜欢的字体
• 调整图像大小以创建缩略图

ImageTemplate.NET 缓存生成的图像，因此它的性能几乎和静态图像一样好。

背景

要开始使用 ImageTemplate.NET，需要 ASP.NET 的基本知识。 动画 GIF 的生成是使用组件Gif.Components.dll完成的，并且使用了 Paint.Net 的一些代码来帮助高质量地旋转图像。

使用代码

只需下载源代码即可开始使用示例 Web 应用程序。

要在你自己的 Web 应用程序中托管 ImageTemplate.NET，请将这些设置添加到你的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>

配置模板的工作在ImageTemplates.config中完成。 它也用于设置元素类型，这些元素类型是一些知道如何实际绘制模板的代码。

<?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>

要使用“fontDemo”模板生成图像，你可以使用这样的 URL：/TestWebsite/TemplateImageGenerator.axd?template=fontDemo&textArea.Text=Hello+World。

你可以使用模板作为基础生成图像，然后使用以下命令设置不同的字体大小：/TestWebsite/TemplateImageGenerator.axd?template=fontDemo&textArea.Text=Canon+IXYuuuuu&textArea.FontSize=50。

可以通过下载该文章的代码或在ImageTemplate.Net上找到更多示例。

本系列文章的下一篇将解释如何编写你自己的图像模板元素类型。

历史

• 1.1：首次公开发布。