In this post, we will see how to retrieve image(BLOB data) saved in SQL server and display in an image control in the web page. In addition to retrieving image from the SQL server, we will resize the image so that it will keep its preportional width and height.
Assume we need to disply the image in an image control ‘imgUserImage‘ in a page, say MyPage.aspx. To set the ImageUrl property of this image control, we need to create one more aspx page which will return the appropriate image. This new aspx page can be used to retrieve image from the database and resize.
Below is the function which select the image from the database and return as Byte. Put this function in a class file.
public static byte[] GetImage(int ImageID)
{
byte[] functionReturnValue = null;
functionReturnValue = null;
SqlClient.SqlConnection SQLConnection = new SqlClient.SqlConnection(ABC.Common.ConnectionString);
SqlClient.SqlCommand SQLCommand = new SqlClient.SqlCommand("SELECT Image FROM Images WHERE ImageID=@ImageID", SQLConnection);
SQLCommand.Parameters.Add(ABC.Common.CreateSQLParameter("@ImageID", SqlDbType.Int, ImageID));
try
{
SQLConnection.Open();
SqlClient.SqlDataReader SQLReader = SQLCommand.ExecuteReader;
SQLReader.Read();
if (SQLReader.HasRows)
{
Drawing.Image Image = (Drawing.Image)ABC.Serialization.DeSerializeToImage((byte[])SQLReader.Item("Image"), SerializationFormat.Binary);
IO.MemoryStream MemoryStream = new IO.MemoryStream();
Image.Save(MemoryStream, Drawing.Imaging.ImageFormat.Jpeg);
functionReturnValue = MemoryStream.ToArray;
MemoryStream.Close();
}
SQLReader.Close();
}
catch (Exception ex)
{
throw ex;
}
finally
{
SQLConnection.Dispose();
}
return functionReturnValue;
}
Create one aspx page,say ImageGraber.aspx and add the below function in the page load.
if (Request.QueryString("ImageID") != null)
{
byte[] arrContent = null;
if (!string.IsNullOrEmpty(Request.QueryString("ImageID")))
{
arrContent = (byte[])ABC.Image.GetImage(Request.QueryString("ImageID"));
string conType = "image/jpeg";
Response.ContentType = conType;
if (arrContent != null)
{
Bitmap btmap = (Bitmap)Bitmap.FromStream(new MemoryStream(arrContent));
Bitmap bmp = CreateThumbnail(btmap, 500, 500);// specify the width and height of the image
if (bmp == null)
{
this.ErrorResult();
return;
}
string OutputFilename = null;
OutputFilename = Request.QueryString("OutputFilename");
if (OutputFilename != null)
{
if (string.IsNullOrEmpty(this.User.Identity.Name))
{
// *** Custom error display here
bmp.Dispose();
this.ErrorResult();
}
try
{
bmp.Save(OutputFilename);
}
catch (Exception ex)
{
bmp.Dispose();
this.ErrorResult();
return;
}
}
// Put user code to initialize the page here
Response.ContentType = "image/jpeg";
bmp.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
bmp.Dispose();
}
else
{
Drawing.Image.FromFile(Server.MapPath("~/Images/NoImage.jpg")).Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
}
}
else
{
Drawing.Image.FromFile(Server.MapPath("~/Images/NoImage.jpg")).Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
}
Response.End();
}
Ofcourse, you need to add two more functins which are called from the above code. First one is ErrorResult()
private void ErrorResult()
{
Response.Clear();
Response.StatusCode = 404;
Response.End();
}
Another function is CreateThumbnail() which is actually doing the image resizing, keeping the image’s height and width proportion. Add the CreateThumbnail() function in the page ImageGrabber.aspx
public static Bitmap CreateThumbnail(Bitmap loBMP, int lnWidth, int lnHeight)
{
System.Drawing.Bitmap bmpOut = null;
try
{
ImageFormat loFormat = loBMP.RawFormat;
decimal lnRatio = default(decimal);
int lnNewWidth = 0;
int lnNewHeight = 0;
//*** If the image is smaller than a thumbnail just return it
if (loBMP.Width < lnWidth && loBMP.Height < lnHeight)
{
return loBMP;
}
if (loBMP.Width > loBMP.Height)
{
lnRatio = (decimal)lnWidth / loBMP.Width;
lnNewWidth = lnWidth;
decimal lnTemp = loBMP.Height * lnRatio;
lnNewHeight = (int)lnTemp;
}
else
{
lnRatio = (decimal)lnHeight / loBMP.Height;
lnNewHeight = lnHeight;
decimal lnTemp = loBMP.Width * lnRatio;
lnNewWidth = (int)lnTemp;
}
bmpOut = new Bitmap(lnNewWidth, lnNewHeight);
Graphics g = Graphics.FromImage(bmpOut);
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.FillRectangle(Brushes.White, 0, 0, lnNewWidth, lnNewHeight);
g.DrawImage(loBMP, 0, 0, lnNewWidth, lnNewHeight);
loBMP.Dispose();
}
catch
{
return null;
}
return bmpOut;
}
Now we will set the ImageUrl property of our image control ‘imgUserImage‘ in the ‘MyPage.aspx‘ as
imgUserImage.ImageUrl = "~/ImageGrabber.aspx?ImageID=" + MemberPictureID + "&ImageType=MemberPictures";
Thats it;
Silent Killer 