|
Creating the thumbnail image and displaying the full
image is done by the same HttpHandler implementation we have used in Part
1.
Creating Thumbnail Image
For reference purpose, we will have the HttpHandler
implementation here also. For description of the code refer Part
1.
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();
}
Displaying the Original Image
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();
}
Note
I have given only the ProcessRequest() method in the
above code. Refer the source code attachment for the full code. I have set default imageID, make sure you are giving an existing imageId in database for the code to work without any errors.
Using DIV Tag to display the full image
To implement this, we will declare a DIV tag in the ASPX page with display
property set to none. This indicates that the DIV tag will not be visible by
default when the page is loaded. Declare a <IMG> tag inside this DIV tag
to display the full image. When the user clicks the thumbnail image, we can
enable the DIV tag through a javascript function and pass the ImID of the image
to call the FullImage.ashx HttpHandler for displaying the full image in
the <img> tag. Also, we will have a button called Close inside the DIV tag
to close the display of full image i.e. on click of this button we will again
make the DIV tag’s display property to none. Refer the below Jscript code,
|