|
It will be good, if the images in the
database are rendered as a thumbnail image with a fixed dimension. On clicking
the thumbnail image, we can display the whole image stored in the database. This
article will help us to accomplish this.
Based on this requirement, I have split
this article into 2 parts,
GridView with Thumbnail Images – Part
1 [Current Article]
- Deals with creation of thumbnails and
binding it to the GridView. On clicking the gridview the full image will be
displayed in a pop up window.
GridView with Thumbnail Images – Part
2
- Deals with
creation of thumbnails and binding it to the GridView. On clicking the gridview
the full image will be displayed in a DIV tag in the same
page.
Creating Thumbnail Image
Since the images are stored in a
database (BLOB), we need to retrieve the image as a byte array and do a binary
write for the images to display in the webpage. To create a Thumbnail of the
image, we will retrieve the image from the database as a byte array and create a
Thumbnail image by using BitMap and Graphics class. We can do this through an
aspx page, but I will use HttpHandler to do this since we do not need some page
level events. Read my previous articles on HttpHandler linked in the reference
section of this article.
Thumbnail.ashx
public void ProcessRequest (HttpContext
context) {
string imageid =
context.Request.QueryString["ImID"];
if (imageid == null || imageid == "")
{
//Set a default imageID
imageid = "1";
}
SqlConnection connection = new
SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);
connection.Open();
SqlCommand command = new
SqlCommand("select Image from Image where ImageID="+imageid,
connection);
SqlDataReader dr =
command.ExecuteReader();
dr.Read();
Stream str = new
MemoryStream((Byte[])dr[0]);
Bitmap loBMP = new
Bitmap(str);
Bitmap bmpOut = new Bitmap(100,
100);
Graphics g =
Graphics.FromImage(bmpOut);
g.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.FillRectangle(Brushes.White, 0,
0, 100, 100);
g.DrawImage(loBMP, 0, 0, 100,
100);
MemoryStream ms = new
MemoryStream();
bmpOut.Save(ms,
System.Drawing.Imaging.ImageFormat.Png);
byte[] bmpBytes =
ms.GetBuffer();
bmpOut.Dispose();
ms.Close();
context.Response.BinaryWrite(bmpBytes);
connection.Close();
context.Response.End();
}
In the above code, we are reading the
image as byte array to construct a bitmap object (loBMP). With the help of
Graphics class, the thumbnail image is constructed from the original bitmap
object which holds the full image. The created thumbnail image is then copied to
a bitmap object (bmpOut) and it is outputted by doing a binary write.
We can test run this HttpHandler by
hard coding an existing imageID in the database.
Now, the created thumbnail image should
be displayed in a GridView column. When we click this thumbnail image on the
gridview, it should open a popup window and display the full image. This can be
done by creating another HttpHandler which retrieves the image from the database
by taking the ImageID as a QueryString and doing a binary write. Next section
will help us doing it.
Displaying the Original
Image
We will create another HttpHandler
which fetches the original image that is stored in the database as a byte array
and do a binary write through the response object. Refer the code
below,
FullImage.ashx
public void ProcessRequest (HttpContext context) {
string imageid =
context.Request.QueryString["ImID"];
if (imageid == null || imageid == "")
{
//Set a default imageID
imageid = "1";
}
SqlConnection connection = new
SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);
connection.Open();
SqlCommand command = new SqlCommand("select Image
from Image where ImageID="+imageid, connection);
SqlDataReader dr = command.ExecuteReader();
dr.Read();
context.Response.BinaryWrite((Byte[])dr[0]);
connection.Close();
context.Response.End();
}
|