Displaying images in a repeater from database

M

marvin

Hi,

I am trying to display images in a repeater from a SQL database and do
some transformations on the image prior to displaying them (such as
thumbnail with a shadow). The problem is I can't seem to get the data
passed to the handler.

The following is the code that I have so far.

In the ViewPics.aspx file I have...

<asp:repeater id="rThumbnails" runat="server">
<itemtemplate>
<img src="Thumbnail.ashx?imgdata=<%#
DataBinder.Eval(Container.DataItem, "ImageData")) %>&w=150&shadow=true"
border="0" width="150">
</itemtemplate>
</asp:repeater>

....where ImageData is an image type in the SQL database


In the Thumbnail.ashx handler I have...

public class Thumbnail : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// Parse parameters
byte[] bytes =
System.Text.Encoding.ASCII.GetBytes(context.Request["imgdata"]);
MemoryStream ms = new MemoryStream(bytes);
Image srcImage = Image.FromStream(ms);
Size size = new Size();
size.Width = Convert.ToInt32(context.Request["w"]);
size.Height = Convert.ToInt32(context.Request["h"]);
// Calculate missing size param maintaining the aspect ration
if (size.Width == 0)
size.Width = srcImage.Width * size.Height / srcImage.Height;
if (size.Height == 0)
size.Height = srcImage.Height * size.Width / srcImage.Width;
bool shadow = (context.Request["shadow"] == "true");

// Create bitmap 10 pixels larger then srcImage (for shadow) and draw
srcImage to it
Bitmap bitmap;
if (shadow)
bitmap = new Bitmap(size.Width+10, size.Height+10,
PixelFormat.Format24bppRgb);
else
bitmap = new Bitmap(size.Width, size.Height,
PixelFormat.Format24bppRgb);
bitmap.SetResolution(srcImage.HorizontalResolution,
srcImage.VerticalResolution);
Graphics g = Graphics.FromImage(bitmap);
if (shadow)
{
// Create shadow effect
g.FillRectangle(new SolidBrush(Color.FromArgb(235, 233, 218)), 0, 0,
size.Width+10, size.Height+10);
g.FillRectangle(new SolidBrush(Color.DarkGray), 8, 8, size.Width+2,
size.Height+2);
g.FillRectangle(new SolidBrush(Color.Black), 0, 0, size.Width+6,
size.Height+6);
g.DrawImage(srcImage, 2, 2, size.Width+2, size.Height+2);
} else
g.DrawImage(srcImage, 0, 0, size.Width, size.Height);
g.TextRenderingHint = TextRenderingHint.AntiAlias;
g.SmoothingMode = SmoothingMode.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;

srcImage.Dispose();
g.Dispose();

// Send the Bitmap to the browser
context.Response.ContentType = "image/jpeg";
context.Response.AppendHeader("Content-Disposition",
"attachment;filename=" + imageFilename);
bitmap.Save(context.Response.OutputStream, ImageFormat.Jpeg);
context.Response.End();

// Cleanup
bitmap.Dispose();
}

public bool IsReusable
{
get { return true; }
}
}

You can ignore the bulk of the above image manipulation code. It works
ok.
The problem is in the first line in getting the image data passed to it
as shown below...

byte[] bytes =
System.Text.Encoding.ASCII.GetBytes(context.Request["imgdata"]);

Instead of passing the string of data from the image filed in the sql
record it returns the string "System.Byte[]"
ie. the data type instead of the data.

I suspect the problem is with the Databinder class but I am lost as to
how else to do this.

Any help would be greatly appreciated.
Thanks
 
S

Sylvain Lafontaine

Instead of storing the ImageData directly in the ViewPics.aspx as a bunch of
bytes in the querystring of Thumbnail.ashx, you should store its ID only and
use this ID to retrieve the ImageData from the database in the Thumbnai.ashx
control.

By using your previous method, the ImageData will travel three times over
the wire instead of just one time: first, as a bunch of bytes written as a
parameter to Thumbnail.axhx?... , then in a GET trip back to the server to
the Thumbnail.ashx control and finally as the image sent back by
Thumbnail.axhx as the source of the HTML image control.

Sending an image over the wire take time; sending it three times will not do
any good.

--
Sylvain Lafontaine, ing.
MVP - Technologies Virtual-PC


Hi,

I am trying to display images in a repeater from a SQL database and do
some transformations on the image prior to displaying them (such as
thumbnail with a shadow). The problem is I can't seem to get the data
passed to the handler.

The following is the code that I have so far.

In the ViewPics.aspx file I have...

<asp:repeater id="rThumbnails" runat="server">
<itemtemplate>
<img src="Thumbnail.ashx?imgdata=<%#
DataBinder.Eval(Container.DataItem, "ImageData")) %>&w=150&shadow=true"
border="0" width="150">
</itemtemplate>
</asp:repeater>

...where ImageData is an image type in the SQL database


In the Thumbnail.ashx handler I have...

public class Thumbnail : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// Parse parameters
byte[] bytes =
System.Text.Encoding.ASCII.GetBytes(context.Request["imgdata"]);
MemoryStream ms = new MemoryStream(bytes);
Image srcImage = Image.FromStream(ms);
Size size = new Size();
size.Width = Convert.ToInt32(context.Request["w"]);
size.Height = Convert.ToInt32(context.Request["h"]);
// Calculate missing size param maintaining the aspect ration
if (size.Width == 0)
size.Width = srcImage.Width * size.Height / srcImage.Height;
if (size.Height == 0)
size.Height = srcImage.Height * size.Width / srcImage.Width;
bool shadow = (context.Request["shadow"] == "true");

// Create bitmap 10 pixels larger then srcImage (for shadow) and draw
srcImage to it
Bitmap bitmap;
if (shadow)
bitmap = new Bitmap(size.Width+10, size.Height+10,
PixelFormat.Format24bppRgb);
else
bitmap = new Bitmap(size.Width, size.Height,
PixelFormat.Format24bppRgb);
bitmap.SetResolution(srcImage.HorizontalResolution,
srcImage.VerticalResolution);
Graphics g = Graphics.FromImage(bitmap);
if (shadow)
{
// Create shadow effect
g.FillRectangle(new SolidBrush(Color.FromArgb(235, 233, 218)), 0, 0,
size.Width+10, size.Height+10);
g.FillRectangle(new SolidBrush(Color.DarkGray), 8, 8, size.Width+2,
size.Height+2);
g.FillRectangle(new SolidBrush(Color.Black), 0, 0, size.Width+6,
size.Height+6);
g.DrawImage(srcImage, 2, 2, size.Width+2, size.Height+2);
} else
g.DrawImage(srcImage, 0, 0, size.Width, size.Height);
g.TextRenderingHint = TextRenderingHint.AntiAlias;
g.SmoothingMode = SmoothingMode.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;

srcImage.Dispose();
g.Dispose();

// Send the Bitmap to the browser
context.Response.ContentType = "image/jpeg";
context.Response.AppendHeader("Content-Disposition",
"attachment;filename=" + imageFilename);
bitmap.Save(context.Response.OutputStream, ImageFormat.Jpeg);
context.Response.End();

// Cleanup
bitmap.Dispose();
}

public bool IsReusable
{
get { return true; }
}
}

You can ignore the bulk of the above image manipulation code. It works
ok.
The problem is in the first line in getting the image data passed to it
as shown below...

byte[] bytes =
System.Text.Encoding.ASCII.GetBytes(context.Request["imgdata"]);

Instead of passing the string of data from the image filed in the sql
record it returns the string "System.Byte[]"
ie. the data type instead of the data.

I suspect the problem is with the Databinder class but I am lost as to
how else to do this.

Any help would be greatly appreciated.
Thanks
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,755
Messages
2,569,535
Members
45,007
Latest member
obedient dusk

Latest Threads

Top