Scott Guthrie
January 14, 2001

Level: Beginner/Intermediate

One of the neat features that you can now leverage with .NET is the ability to easily generate dynamic images from code, which you can then either save to disk or directly stream back to a browser client with ASP.NET.

The functionality to generate images with .NET is encapsulated within the System.Drawing namespace. It provides built-in support for generating images with a numer of file formats including: JPEG, GIF, PNG, TIFF, BMP, PhotoCD, FlashPIX, WMF, EMF and EXIF. Note that there are no license issues to worry about with any of these file formats; Microsoft implementation of each format is license free (including for GIF images).

The general mechanism through which you generate these graphics images is by constructing a BitMap object which provides an in-memory representation of your image. You can then call its "Save" method to either save it to disk, or stream it out to any .NET output stream. Because ASP.NET exposes a .NET OutputStream via the Response.OutputStream property. This means you can stream the image contents directly to the browser without ever having to save it to disk.

For example, to do this in VB you would write code like:

' Create In-Memory BitMap of JPEG
Dim MyChartEngine as New ChartEngine
Dim StockBitMap as BitMap = MyChartEngine.DrawChart(600, 400, myChartData)

' Render BitMap Stream Back To Browser
StockBitMap.Save(Response.OutputStream, ImageFormat.JPEG)

If you are using an ASPX page to do this, you will want to make sure you set the appropriate HTTP ContentType header as well, so that the browser client doesn't interpret the page's content as html but rather as an image. You can do this either via setting the Response.ContentType property through code, or via the new "ContentType" attribute that you can set on the top-level page directive:

<%@ Page Language="VB" ContentType="image/jpeg" %>

Note that the output caching features of ASP.NET work for both textual content as well as for binary output. As such, if you are dynamically generating an image from a page, you can easily leverage the output cache directive to avoid having to regenerate the image on each request. Note that image generation can be expensive, so this feature is highly recommended. For example, the below directive could be used to output cache the generated image for a 60 second interval:

<%@ Page Language="VB" ContentType="image/jpeg" %>
<%@ OutputCache Duration="60" %>

For a complete sample of how to use image generation, I've included a simple stock chart generation sample below. Note that the stock prices aren't real, just wishful thinking on my part. The sample uses a custom "ChartEngine" class that helps encapsulate the logic required to build up a generic chart. You should be able to use this helper component to do any custom charting of your own, it is definitely not limited to just stock data.

Feel free to use any of the code however you want and like with all my other samples, feel free to post elsewhere as well as to use for articles, other samples, etc).

Instructions:

To run the sample, copy/paste/save the below files into an IIS Application VRoot. Then type the below statements into a command line:

mkdir bin
csc /t:library /out:bin\chartgen.dll ChartEngine.cs /r:System.Web.dll /r:System.Winforms.dll /r:System.Drawing.dll /r:System.dll

Once the chartengine helper utility is compiled, hit the StockPicker.aspx page to run the sample (note that this in turn sets up a <img> tag to point to the ImageGenerator_VB.aspx page that does the actual image generation work).