Building Simple Images

Let's begin with a simple ASP.NET page that displays an image. To do so, you need to complete the following steps:

  1. Specify the content type of the page.

  2. Create a bitmap that represents an image.

  3. Save the bitmap to the HTTP output stream.

The page in Listing 27.1 illustrates each of these steps. It displays an image with 1,000 red pixels (see Figure 27.1).

Listing 27.1 SimpleImage.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 intCounter As Integer   Dim objRandom As Random   ' Create Bitmap   objBitmap = New Bitmap( 400, 200 )   ' Set 1000 Pixels   objRandom = New Random   For intCounter = 1 To 1000     objBitmap.SetPixel( objRandom.Next( 400 ), objRandom.Next( 200 ), Color.Red )   Next   ' Display Bitmap   objBitmap.Save( Response.OutputStream, ImageFormat.Gif ) End Sub </Script> 

The C# version of this code can be found on the CD-ROM.

Figure 27.1. Displaying a simple image.


Notice the first line in Listing 27.1; it contains a page directive that sets the content type of the page. By default, the ContentType attribute has the value text/html . Because this page displays a GIF image, ContentType is assigned the value image/gif .

If you were generating JPEG images, you would need to assign the value image/jpeg to ContentType . When generating PNG images, you would need to use the value image/png .

Instead of using a page directive to specify the content type of the page, you could set the content type programmatically by using the ContentType property of the Response object. For example, the following statement sets the content type to image/jpeg :


In Listing 27.1, the image is constructed in the Page_Load subroutine. First, a bitmap that contains 400 horizontal pixels and 200 vertical pixels is created. After the bitmap is created, 1,000 pixels in the bitmap are assigned the color red. The pixels are set with the SetPixel method. Finally, the bitmap is displayed after it is saved to the Response object's output stream. Here, the bitmap is saved as a GIF image.

When the page in Listing 27.1 is opened in a Web browser, the browser interprets the page as an image. From the browser's perspective, it has received a GIF image with the weird name SimpleImage.aspx .

Typically, you want to display the image that you generate with other content, such as text and explanations . You can display a dynamically generated image within a page by using any of the standard methods of displaying an image. For example, the page in Listing 27.2 displays a dynamically generated image with the HTML <img> tag (see Figure 27.2).

Listing 27.2 DisplaySimpleImage.aspx
 <html> <head><title>DisplaySimpleImage.aspx</title></head> <body> <h2>Here's the image:</h2> <img src="SimpleImage.aspx"> <h2>Here's the image again:</h2> <img src="SimpleImage.aspx"> </body> </html> 

The C# version of this code can be found on the CD-ROM.

Figure 27.2. Displaying an image in a page.


The page in Listing 27.2 displays the image generated by the SimpleImage.aspx page twice. The value SimpleImage.aspx is assigned to the SRC attribute of both instances of the HTML <img> tag.


If you use a page to dynamically generate an image and the image changes infrequently, you should consider caching the output of the page. To learn more details about page output caching, see Chapter 17, "Caching ASP.NET Applications."

ASP.NET Unleashed
ASP.NET 4 Unleashed
ISBN: 0672331128
EAN: 2147483647
Year: 2003
Pages: 263

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: