Getting and Displaying Images from SQL Server with C#

Now that Jesse Smith has taught you how to store those system-taxing images in your SQL Server database, you do rather need to know how to get them back out again when the user accesses a page. C# comes to the rescue with easy scripts for grab-and-display.

Like this article? We recommend

Like this article? We recommend

In
part 1 of this series,
I explained how to use C# scripts to get your web site's images into your
SQL Server database. In this article, I show you how to win the second half of
the battle by retrieving images from SQL Server and displaying them in a web
page.

Getting and displaying an image with C# is actually considerably easier than
putting the image into SQL Server. Basically, all we do is write the
image's binary stream to the web page. And here's a bonus: The scripts
not only display the images, but resize them! This technique is great for
eCommerce sites; you can show thumbnails for product images; the thumbnail blows
up into the full-size image only when the user clicks the thumbnail.

Lines 1–6 of Listing 1 load our namespaces from the .NET library. Line
2 loads the System.Drawing namespace that's needed for displaying
and resizing images to scale. The other namespaces are straightforward;
they're for streaming binary data (System.IO namespace on line 4)
and SQL Server objects (lines 5–6).

TIP

I recommend reviewing the System.Drawing namespace in some detail.
Not only can it resize images, but make them transparent or crop them, among
other things.

Line 7 starts the ImageResizing namespace; it contains a single
class called MainDisplay that does all the work of retrieving and
displaying the image. This class contains the C# Page_Load function
that tells the script compiler that this code is to be executed every time the
page is loaded or refreshed.

On lines 11–13 we get the ID, height, and width of the image to be
displayed. As you'll see in the next section, we tell this script what
these parameters are from the calling web page script.

Next, we set up and open an SQL Server connection to a database called
e-commerce and perform a query against a table called Image
based on the ID of the image we want to display. After setting up a data reader
to index into the recordset of this table, on line 21 we tell the script
compiler that the image will be of type JPEG or GIF, the most popular image
formats for the web.

Lines 22–24 use the nifty System.Drawing namespace functions.
Line 22 looks a bit confusing because it has nested function calls. It sets up a
new class type called _image that's derived from the
Image class type of the System.Drawing namespace. The
_image type consists of a new memory stream that's created by a
class called System.IO.MemoryStream, passed to the FromStream
function of the Image class. We pass the
System.IO.MemoryStream class the data from the img_data field
of the Image table, as a byte array. Byte arrays are often used to
store binary (image) data for formatting and efficiency reasons.

On line 23, we create yet another new class type, called newimage,
derived from the _image class type we just created, and instantiate a
method called GetThumbnailImage. This method is passed the width and
height of the main image we'll display, and scales the image to the
specified size. The IntPtr function is also passed to this method (with
no value).

NOTE

IntPtr is often used for image capture. We don't need
IntPtr for this example, but we have to pass it anyway because
it's required.

Finally, and most importantly, we use the Save method of the
Image class type to retrieve the image output stream from the HTTP
protocol and save it as a .jpg image when it reaches the browser.

Save this script with any name you like. For this example, I'll call it
imagegen.aspx.cs.

Now it's time to look at the web page script that calls on the
code-behind script above. Adding the ability to load images to a web page is
easy and the same code-behind script can be used every time.