Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Using GDI+ in ASP.NET Web Applications, Part I : Page 6

GDI+ is generally considered a Windows technology. However, some of the new GDI+ features make this technology an excellent choice even for Web applications, enabling developers to generate images, graphs, dynamic buttons, banners, and much more on-the-fly.


A Simple Photo Album
I'm going to take what you've learned so far and write a simple photo album application. Let's say you want to write an ASP.NET page that will display all the image files in a directory, and add formatting to display the images as you would see them in a strip of film. You can easily retrieve a list of all files using the following command:

   System.IO.Directory.GetFiles( _
Once you retrieve a list of files, you can generate a list of <IMG> tags, such as the following:

   <img src="Thumb.aspx?img=First.jpg">
Listing 5 shows the code to create the film strip effect. It will first create a black drawing canvas. Then the code creates a second image to use as a brush to draw the whole at the top and the bottom of the film strip. This bitmap is as tall as the main film strip, but only as wide as a single hole. The code draws the holes using rounded white rectangles with a thick enough Pen to make them look like filled rectangles (or holes). Finally, the code creates a new texture brush based on that image and fills the entire area with that texture. Voila! You've created a film strip.

Next the code loads the actual image and determines its size and orientation. Based on that information, the code calculates the shrink-factor for the thumbnail image, which the code creates then draws on the canvas with an appropriate placement to center the thumbnail on the film strip. Finally, the code renders a copyright notice and streams the file to the client.

Note: Bitmap objects have a native method to generate thumbnail images. Depending on your situation, you may be better of using the Bitmap object's native method to create thumbnails. This technique often performs better because the method can retrieve thumbnail information that may already be in the image. In this example however, I chose not to do that in order to have more control over the generated thumbnail.

You can see the result in Figure 8, or on my personal Web site (http://www.MarkusEgger.com). If you go to my Web site and look at the pictures from Chichen Itza (as shown in Figure 8), you will see about 50 thumbnail images. Each of those images (before my code turns them into thumbnails) is about 2MB in size. When you hit that page, you will make ASP.NET plow through about 100MB of data. The resulting performance is very reasonable. In fact, on my local machine, the Web site generates the thumbnails with the extra film strip effect faster than Windows Explorer can display a thumbnail view of the same folder. It's quite amazing.

Markus Egger is the President and Chief Software Architect of EPS Software Corp., located in Houston, Texas. He is also the founder of EPS Software Austria, located in Salzburg. Markus concentrates on consulting and development of custom software based on Microsoft technologies. His passion lies with object-oriented technology. Markus is an international author and speaker, and is the publisher of CoDe Magazine. For the past 8 years, Markus has received the Microsoft MVP award, originally for Visual FoxPro, and now for C#. Several applications he has worked on (mostly as project manager) have received Microsoft Excellence Award nominations. You can find a full bio on the Web at http://www.eps-cs.com and http://www.MarkusEgger.com. Email Markus at megger@eps-software.com.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date