Generating Images On-the-Fly with ASP.NET and GDI+
- Displaying a Simple Image in a Web Page
- Drawing a Line Graph From Database Data
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The .NET Framework includes a rich set of classes for generating images. You can use these classes to generate images in a variety of different formats, such as GIF, JPEG, TIFF, PNG, and BMP. You can also use these classes to draw complex shapes, including arcs, polygons, and Bezier curves. There's nothing stopping you from taking advantage of all these classes in your ASP.NET Web applications.
When building images, you'll work with two main classes (both located in the System.Drawing namespace). First, whenever you create a new image, you need to create a new instance of the Bitmap class. The Bitmap class represents the pixel data for an image. You use the methods of the Bitmap class to specify the format and resolution of the image that you want to create. You can also use the methods of the Bitmap class to change the values of individual pixels.
If you need to draw complex shapes—such as lines, rectangles, and circles—then you need to use the Graphics class. The methods of the Graphics class are applied to an instance of the Bitmap class.
Displaying a Simple Image in a Web Page
If you want to dynamically generate an image and display the image in a Web Page, then you actually need to create two ASP.NET pages. You create one page that generates the byte data for the actual image. This page is then displayed in a second page, the display page, with an HTML <img> tag.
Let's create a pair of pages that displays a red circle. We'll generate a GIF image for the circle in an ASP.NET page named Circle.aspx. The code for the Circle.aspx page is contained in Listing 1. You can link to the Circle.aspx file here.
Listing 1—Circle.aspx
<%@ Page ContentType="image/gif" %> <%@ Import namespace="System.Drawing" %> <%@ Import namespace="System.Drawing.Imaging" %> <Script Runat="Server"> Sub Page_Load Dim objBitmap As Bitmap Dim objGraphics As Graphics ' Create Bitmap objBitmap = New Bitmap( 200, 200 ) ' Initialize Graphics Class objGraphics = Graphics.FromImage( objBitmap ) objGraphics.FillEllipse( Brushes.Red, 0, 0, 200, 200 ) ' Display Bitmap objBitmap.Save( Response.OutputStream, ImageFormat.Gif ) End Sub </Script>
The ASP.NET page in Listing 1 is actually pretending to be a GIF image. That's the purpose of the ContentType directive that appears at the very top of the page. When the page is requested, the ContentType directive tells the Web browser that it should expect a GIF image instead of a normal HTML page.
You can open the page in Listing 1 in a Web browser. However, if you open the page directly in a Web browser, then you can't add any other content to the body of the page. For example, you cannot add HTML content around the outside of the image. For this reason, you normally will need to open the page in Listing 1 in a second page.
The page in Listing 2 contains an HTML <img> tag that loads the page in Listing 1. Notice that the page in Listing 2 contains normal HTML content that appears around the image (see Figure 1). You can link to the DisplayCircle.aspx file here.
){kind=link}
Listing 2—DisplayCircle.aspx
<html> <head><title>DisplayCircle.aspx</title></head> <body> <h1>Here is an image:</h1> <img src="Circle.aspx"> <h1>The image appears above!<h1> </body> </html>
It is important to understand that from the Web browser's perspective, the Circle.aspx page is nothing but a normal GIF image. It has no idea that the image was dynamically generated in an ASP.NET page.
Figure 1 Displaying graphics in an ASP.NET page.