473,897 Members | 2,558 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 4170
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=s omeimage.jpg&si ze=small

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.Output Stream

A simple method like this should help

"stream" in this case Response.Output Stream. 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(re f System.IO.Strea m 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.GetThumbnai lImage(width, height, null, ptr);

thumbnail.Save( stream, img.RawFormat);

thumbnail.Dispo se();

}

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.1496 15$ts4.20420@pd 7tw3no...
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_ItemD ataBound(ByVal sender As Object, ByVal e As
System.Web.UI.W ebControls.Data ListItemEventAr gs) Handles
DataList1.ItemD ataBound

Dim b As Button

b = e.Item.FindCont rol("MyButton")

AddHandler Button1.Click, AddressOf DataListButtonC lick

End Sub

Private Sub DataListButtonC lick(ByVal sender As System.Object, ByVal e
As System.EventArg s) 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_nWid th/(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.PixelForm at);
double nXFactor = (double)bTemp.W idth/(double)nWidth;
double nYFactor = (double)bTemp.H eight/(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_minu s_x * c1.B + fraction_x * c2.B);
b2 = (byte)(one_minu s_x * c3.B + fraction_x * c4.B);
blue = (byte)(one_minu s_y * (double)(b1) + fraction_y * (double)(b2));
// Green
b1 = (byte)(one_minu s_x * c1.G + fraction_x * c2.G);
b2 = (byte)(one_minu s_x * c3.G + fraction_x * c4.G);
green = (byte)(one_minu s_y * (double)(b1) + fraction_y * (double)(b2));
// Red
b1 = (byte)(one_minu s_x * c1.R + fraction_x * c2.R);
b2 = (byte)(one_minu s_x * c3.R + fraction_x * c4.R);
red = (byte)(one_minu s_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.Floo r(x * nXFactor)),
(int)(Math.Floo r(y * nYFactor))));
}
return b;
}
"Shiv Kumar" <sh***@erolsnoo oospaaaam.com> wrote in message
news:Ow******** ******@TK2MSFTN GP11.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=s omeimage.jpg&si ze=small

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.Output Stream

A simple method like this should help

"stream" in this case Response.Output Stream. 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(re f System.IO.Strea m 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.GetThumbnai lImage(width, height, null, ptr);

thumbnail.Save( stream, img.RawFormat);

thumbnail.Dispo se();

}

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.1496 15$ts4.20420@pd 7tw3no...
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
GetThumbnailIma ge returns a bad image if the size if larger than about
120x120. GetThumbnailIma ge 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.D rawing.Image src, int nWidth, int
nHeight, bool bBilinear)
{
Bitmap bmPhoto = new Bitmap(nWidth, nHeight,
PixelFormat.For mat24bppRgb);
bmPhoto.SetReso lution(src.Hori zontalResolutio n, src.VerticalRes olution);
Graphics grPhoto = Graphics.FromIm age(bmPhoto);
grPhoto.Interpo lationMode = InterpolationMo de.HighQualityB icubic;
grPhoto.DrawIma ge(src,
new Rectangle(0,0,n Width,nHeight),
new Rectangle(0,0,s rc.Width,src.He ight),
GraphicsUnit.Pi xel);
grPhoto.Dispose ();
return bmPhoto;
}
"Shiv Kumar" <sh***@erolsnoo oospaaaam.com> wrote in message
news:ee******** ******@tk2msftn gp13.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***@erolsnoo oospaaaam.com> wrote in message
news:un******** ******@TK2MSFTN GP10.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(Resp onse.OutputStre am, ImageFormat.Jpe g)

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

"Shiv Kumar" <sh***@erolsnoo oospaaaam.com> wrote in message
news:un******** ******@TK2MSFTN GP10.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.DrawIma ge(src,
new Rectangle(0,0,n Width,nHeight),
new Rectangle(0,0,s rc.Width,src.He ight),
GraphicsUnit.Pi xel);
grPhoto.Dispose ();
return bmPhoto;

to:

grPhoto.DrawIma ge(src,
new Rectangle(0,0,n Width,nHeight),
new Rectangle(0,0,s rc.Width,src.He ight),
GraphicsUnit.Pi xel);
grPhoto.Dispose ();
MemoryStream ms = new MemoryStream();
bmPhoto.Save(ms , ImageFormat.Jpe g);
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

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

Similar topics

0
3126
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. However, the DataGrid begins to get very cumbersome as the number of columns of data you present increases. Anything more than half a dozen columns or so and you probably induce horizontal scrolling - a real no-no for me. If you put such a...
1
10936
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 my datalist has an id of "Datagrid3". dgChild comes back with "Nothing" while debugging. Here is my code in the itemdatabound event for the datalist: <code>
8
5896
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 that, I display End_Date on the DataList control. The output looks like 3/18/2005 12:00:00 AM . I'd like to format data for this field to be 3/18/2005. Please help me. Thanks in advance....
2
3456
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: //Page_load of my user control protected void Page_Load(object sender, EventArgs e) { IDataItemContainer DataContainer = this.Parent as
3
1606
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() .... <asp:datalist id="dtlcharts" runat="server" >
4
2161
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" RepeatColumns="4" Width="100%" GridLines="Vertical"> <ItemTemplate>
1
3964
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 DatalistItemTemplate : ITemplate { public void InstantiateIn(Control container)
2
2812
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 work. If I view the page source I can see that the ImageURL property has the value 'System.Byte' but no image is displayed. By placing a STOP in the _ItemDatabound event I can see that the column does contain data...
1
2041
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). I am trying to create a property at the parent control that sets a property in the child instances. So for example lets say I am creating a control that displays a list of hotel reservations for a group of people.
0
9990
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9837
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10849
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10939
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9655
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
7183
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4697
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4292
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3299
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.