473,382 Members | 1,710 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 software developers and data experts.

Resizing Image control in DataList ItemTemplate

I have a DataList control that has an Image control in the ItemTemplate. I
would like to resize the image that goes into that control. I have a series
of jpg files that are full size, full resolution (ie. large). I have a
database that contains references to the pictures. Currently I have to
resize the jpgs manually, and then point the ImageUrl property at that jpg
using databinding. This works fine. I would like to avoid the resizing step
and have the server code do it. I could then have the full image load into
another browser window if the user requests it, but the initial image would
be a realistic size (640x480 or 720x480). Is there a way to replace the
Image control in the datalist with a new resized one?

If I had a Button object in the datalist ItemTemplate, how do I receive the
event that it has been pressed? With just a button on the form, I can just
dblclick the control in the IDE and the event is added to the code.
Nov 18 '05 #1
10 4117
David,

For now I will assume you know the basic mechanics of the http protocol and
how browsers work with regards to <img>, <link>, <script> tags etc.

So in theory, your image control's ImageUrl should point to (to keep it
simple) an aspx page whose sole purpose is:
Given the url to the full sized image (as a parameter), to return the
thumbnail of that image. Better still, an additional parameter in the url
will tell it if you need a thumbnail or full size.

So lets say that the ImageUrl property of the image control would look like
this:

/ImageProcessor.aspx?filename=someimage.jpg&size=sm all

No in the ImageProcessor.aspx you simply load up the actual file and (if the
size parameter = small) get a thumbnail.

The way you return the "image" (binary) to the browser is by writing to the
Response.OutputStream

A simple method like this should help

"stream" in this case Response.OutputStream. In my case width, height and
img are private members of my class that were initialized at the time of
creating and instance.
public void GetThumbnail(ref System.IO.Stream stream)

{

System.Drawing.Image thumbnail;

System.IntPtr ptr = new IntPtr();

/* If the width parameter is "0", assume normal image size */

if (width != 0)

{

thumbnail = img.GetThumbnailImage(width, height, null, ptr);

thumbnail.Save(stream, img.RawFormat);

thumbnail.Dispose();

}

else

{

img.Save(stream, img.RawFormat);

}

img.Dispose();

}
--
Shiv R. Kumar
http://www.matlus.com
"David W. Simmonds" <da***@simmonds.ca> wrote in message
news:5jeOb.149615$ts4.20420@pd7tw3no...
I have a DataList control that has an Image control in the ItemTemplate. I
would like to resize the image that goes into that control. I have a series of jpg files that are full size, full resolution (ie. large). I have a
database that contains references to the pictures. Currently I have to
resize the jpgs manually, and then point the ImageUrl property at that jpg
using databinding. This works fine. I would like to avoid the resizing step and have the server code do it. I could then have the full image load into
another browser window if the user requests it, but the initial image would be a realistic size (640x480 or 720x480). Is there a way to replace the
Image control in the datalist with a new resized one?

If I had a Button object in the datalist ItemTemplate, how do I receive the event that it has been pressed? With just a button on the form, I can just
dblclick the control in the IDE and the event is added to the code.

Nov 18 '05 #2
Hi David,

Thank you for using MSDN Newsgroup. I am Luke and I am review this issue
currently. As I understand, you have two questions about the DataList
control:

1. How to resize a image
2. How to receive events from a button in ItemTemplate

For question 1, you may refer to the Shiv's message, I think his suggestion
is a valid solution. For question 2, we should associate the button's Click
event with a function with AddHandler method. For example, in the
datalist's ItemDataBound :
Private Sub DataList1_ItemDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataListItemEventArgs) Handles
DataList1.ItemDataBound

Dim b As Button

b = e.Item.FindControl("MyButton")

AddHandler Button1.Click, AddressOf DataListButtonClick

End Sub

Private Sub DataListButtonClick(ByVal sender As System.Object, ByVal e
As System.EventArgs) Handles Button1.Click

End Sub

Hope this help,

Luke
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Nov 18 '05 #3
Do you have a fast method of resizing a System.Drawing.Image object?
Preferably one that results in a quality image. I have a method found on
codeproject.com, but as noted in the comment, it requires a lot of cpu time.

int y = (int)(((double)((double)m_nWidth/(double)m_Image.Size.Width)) *
(double)m_Image.Size.Height);
thumb = Resize(new Bitmap(m_Image), m_nWidth, y, (bool)(m_nWidth > 200));
public static Bitmap Resize(Bitmap b, int nWidth, int nHeight, bool
bBilinear)
{
//Bitmap bTemp = (Bitmap)b.Clone();
Bitmap bTemp = b;
b = new Bitmap(nWidth, nHeight, bTemp.PixelFormat);
double nXFactor = (double)bTemp.Width/(double)nWidth;
double nYFactor = (double)bTemp.Height/(double)nHeight;
if (bBilinear)
{
double fraction_x, fraction_y, one_minus_x, one_minus_y;
int ceil_x, ceil_y, floor_x, floor_y;
Color c1 = new Color();
Color c2 = new Color();
Color c3 = new Color();
Color c4 = new Color();
byte red, green, blue;
byte b1, b2;
for (int x = 0; x < b.Width; ++x)
{
for (int y = 0; y < b.Height; ++y)
{
// Setup
floor_x = (int)Math.Floor(x * nXFactor);
floor_y = (int)Math.Floor(y * nYFactor);
ceil_x = floor_x + 1;
if (ceil_x >= bTemp.Width) ceil_x = floor_x;
ceil_y = floor_y + 1;
if (ceil_y >= bTemp.Height) ceil_y = floor_y;
fraction_x = x * nXFactor - floor_x;
fraction_y = y * nYFactor - floor_y;
one_minus_x = 1.0 - fraction_x;
one_minus_y = 1.0 - fraction_y;
c1 = bTemp.GetPixel(floor_x, floor_y);
c2 = bTemp.GetPixel(ceil_x, floor_y);
c3 = bTemp.GetPixel(floor_x, ceil_y);
c4 = bTemp.GetPixel(ceil_x, ceil_y);
// Blue
b1 = (byte)(one_minus_x * c1.B + fraction_x * c2.B);
b2 = (byte)(one_minus_x * c3.B + fraction_x * c4.B);
blue = (byte)(one_minus_y * (double)(b1) + fraction_y * (double)(b2));
// Green
b1 = (byte)(one_minus_x * c1.G + fraction_x * c2.G);
b2 = (byte)(one_minus_x * c3.G + fraction_x * c4.G);
green = (byte)(one_minus_y * (double)(b1) + fraction_y * (double)(b2));
// Red
b1 = (byte)(one_minus_x * c1.R + fraction_x * c2.R);
b2 = (byte)(one_minus_x * c3.R + fraction_x * c4.R);
red = (byte)(one_minus_y * (double)(b1) + fraction_y * (double)(b2));
b.SetPixel(x,y, System.Drawing.Color.FromArgb(255, red, green, blue));
}
}
}
else
{
for (int x = 0; x < b.Width; ++x)
for (int y = 0; y < b.Height; ++y)
b.SetPixel(x, y, bTemp.GetPixel((int)(Math.Floor(x * nXFactor)),
(int)(Math.Floor(y * nYFactor))));
}
return b;
}
"Shiv Kumar" <sh***@erolsnoooospaaaam.com> wrote in message
news:Ow**************@TK2MSFTNGP11.phx.gbl...
David,

For now I will assume you know the basic mechanics of the http protocol and how browsers work with regards to <img>, <link>, <script> tags etc.

So in theory, your image control's ImageUrl should point to (to keep it
simple) an aspx page whose sole purpose is:
Given the url to the full sized image (as a parameter), to return the
thumbnail of that image. Better still, an additional parameter in the url
will tell it if you need a thumbnail or full size.

So lets say that the ImageUrl property of the image control would look like this:

/ImageProcessor.aspx?filename=someimage.jpg&size=sm all

No in the ImageProcessor.aspx you simply load up the actual file and (if the size parameter = small) get a thumbnail.

The way you return the "image" (binary) to the browser is by writing to the Response.OutputStream

A simple method like this should help

"stream" in this case Response.OutputStream. In my case width, height and
img are private members of my class that were initialized at the time of
creating and instance.
public void GetThumbnail(ref System.IO.Stream stream)

{

System.Drawing.Image thumbnail;

System.IntPtr ptr = new IntPtr();

/* If the width parameter is "0", assume normal image size */

if (width != 0)

{

thumbnail = img.GetThumbnailImage(width, height, null, ptr);

thumbnail.Save(stream, img.RawFormat);

thumbnail.Dispose();

}

else

{

img.Save(stream, img.RawFormat);

}

img.Dispose();

}
--
Shiv R. Kumar
http://www.matlus.com
"David W. Simmonds" <da***@simmonds.ca> wrote in message
news:5jeOb.149615$ts4.20420@pd7tw3no...
I have a DataList control that has an Image control in the ItemTemplate. I would like to resize the image that goes into that control. I have a

series
of jpg files that are full size, full resolution (ie. large). I have a
database that contains references to the pictures. Currently I have to
resize the jpgs manually, and then point the ImageUrl property at that jpg using databinding. This works fine. I would like to avoid the resizing

step
and have the server code do it. I could then have the full image load into another browser window if the user requests it, but the initial image

would
be a realistic size (640x480 or 720x480). Is there a way to replace the
Image control in the datalist with a new resized one?

If I had a Button object in the datalist ItemTemplate, how do I receive

the
event that it has been pressed? With just a button on the form, I can just dblclick the control in the IDE and the event is added to the code.


Nov 18 '05 #4
David,

Other than figuring out the new size and maintaining the aspect ratio the
code I provided will work (it needs to be given the size). But even getting
at the proper size (while maintaining the aspect ratio) is not as
complicated as the code you posted.

--
Shiv R. Kumar
http://www.matlus.com
Nov 18 '05 #5
The code you provided is excellent and it works, but the call to
GetThumbnailImage returns a bad image if the size if larger than about
120x120. GetThumbnailImage will read the thumbnail contained in the jpg and
resize it. The thumbnail in the jpg is generally small and low resolution.

I found some code and modified it to look like this:
public System.Drawing.Image Resize(System.Drawing.Image src, int nWidth, int
nHeight, bool bBilinear)
{
Bitmap bmPhoto = new Bitmap(nWidth, nHeight,
PixelFormat.Format24bppRgb);
bmPhoto.SetResolution(src.HorizontalResolution, src.VerticalResolution);
Graphics grPhoto = Graphics.FromImage(bmPhoto);
grPhoto.InterpolationMode = InterpolationMode.HighQualityBicubic;
grPhoto.DrawImage(src,
new Rectangle(0,0,nWidth,nHeight),
new Rectangle(0,0,src.Width,src.Height),
GraphicsUnit.Pixel);
grPhoto.Dispose();
return bmPhoto;
}
"Shiv Kumar" <sh***@erolsnoooospaaaam.com> wrote in message
news:ee**************@tk2msftngp13.phx.gbl...
David,

Other than figuring out the new size and maintaining the aspect ratio the
code I provided will work (it needs to be given the size). But even getting at the proper size (while maintaining the aspect ratio) is not as
complicated as the code you posted.

--
Shiv R. Kumar
http://www.matlus.com

Nov 18 '05 #6
Yes the code you posted is what I would do (and have been doing before
coming across the GetThumbnail method and in other development
tools/languages) as well.
--
Shiv R. Kumar
http://www.matlus.com
Nov 18 '05 #7
When the image arrives at the client side, it is a .bmp file, so it is a
huge file. What do I have to do to send it as a .jpg?

"Shiv Kumar" <sh***@erolsnoooospaaaam.com> wrote in message
news:un**************@TK2MSFTNGP10.phx.gbl...
Yes the code you posted is what I would do (and have been doing before
coming across the GetThumbnail method and in other development
tools/languages) as well.
--
Shiv R. Kumar
http://www.matlus.com

Nov 18 '05 #8
I have tried using
thumb.Save(Response.OutputStream, ImageFormat.Jpeg)

but right clicking on the image and selecting Save Target As... only allows
me to choose a .bmp file.

"Shiv Kumar" <sh***@erolsnoooospaaaam.com> wrote in message
news:un**************@TK2MSFTNGP10.phx.gbl...
Yes the code you posted is what I would do (and have been doing before
coming across the GetThumbnail method and in other development
tools/languages) as well.
--
Shiv R. Kumar
http://www.matlus.com

Nov 18 '05 #9
Hi David,

You may convert it to JPG format before return. For example:

from:
...
grPhoto.DrawImage(src,
new Rectangle(0,0,nWidth,nHeight),
new Rectangle(0,0,src.Width,src.Height),
GraphicsUnit.Pixel);
grPhoto.Dispose();
return bmPhoto;

to:

grPhoto.DrawImage(src,
new Rectangle(0,0,nWidth,nHeight),
new Rectangle(0,0,src.Width,src.Height),
GraphicsUnit.Pixel);
grPhoto.Dispose();
MemoryStream ms = new MemoryStream();
bmPhoto.Save(ms, ImageFormat.Jpeg);
Bitmap myPhoto = new Bitmap(ms);
return myPhoto

Luke
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Nov 18 '05 #10
Hi David,

What did you mean "did not work"? Is it still in BMP format or generate
some error? I test your code on my side and it have two options when I
select "save picture as": JPG and BMP". Or you may try:

thumb.Save(Response.OutputStream, ImageFormat.Jpeg);

Will this save it as JPG format?

Luke
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
Nov 18 '05 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Alex | last post by:
Interested in more .NET stuff visit www.dedicatedsolutions.co.uk The DataList is not as powerful as the DataGrid. It requires more work from you since it has no default data presentation format....
1
by: bill yeager | last post by:
I have a datagrid control within a datalist control. When I try and do a "Find" on the control, the object comes back with nothing and then my pgm crashes. I am 100% sure that my datagird inside...
8
by: bienwell | last post by:
Hi, I have a problem of displaying data bound by a datalist control. In my table, I have a field Start_date which has Short Date data type. I tried to update this field by Current Date. After...
2
by: Hans Merkl | last post by:
Hi, I am trying to use a user control as EditItemTemplate in a DataList. It loads fine but I can't figure out how to bind to the data of the DataList. Here is what I have got so far: ...
3
by: Jon Paal | last post by:
I have a datalist bound to an arraylist holding 3 chart controls. I want to display the charts in the datalist : .... dtlcharts.Datasource = arrCharts dtlcharts.Databind() .... ...
4
by: Sam Martin | last post by:
Hi, I have got a User Control that contains for the sake of argument, a single DataList control. eg. <asp:DataList id="DataListMain" runat="server" RepeatDirection="Horizontal"...
1
by: shantanu_kush | last post by:
Hi there, I am using a DataList in a composite control. The DataList has an Custom ItemTemplate(ITemplate) which adds a Button to the DataList Item as shown in the code below : public class...
2
by: GD | last post by:
I'm trying to bind (display) a SQL column to an <asp:image control. I was under the impression that this could be achieved my pointing the ImageURL to the databound column but it doesn't seem to...
1
by: berny.zamora | last post by:
Hello everyone, I have a composite control (lets call it the parent) that contains a datalist. The datalist has an ItemTemplate that contains another composite control (lets call it the child)....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.