ASP.NET 4 Unleashed

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 :

Response.ContentType="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.

NOTE

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."

Related

Категории