Image size question

[dgk]

I have an app that has many subdirectories containing one or more
images (jpg, gif, bmp). When the user selects a directory, my plan is
to show the images if there are only one or two, or show thumbnails if
there are more and allow the user to click on each thumbnail to view
it full size.

Right now I'm just sticking an <IMG> tag for each image into a literal
control. It works fine but the images are huge which surprised me. I
really don't know the size of the image in order to specify height and
width in the IMG tag. I tried loading them and checking the
image.height and width but, after around 6 or 7 it runs out of memory.
Very weird. I am disposing the image after each one is loaded.

But that approach is very wasteful anyway. There can't be a need to
load each image just to get the browser to display it at the proper
size. Should I try adding image controls dynamically instead of
spitting out html? Am I missing the point entirely?

The thumbnail idea also presents the same problem. It seems wasteful
to load an image and generate the thumbnail in memory each time. I
guess I can check to see if the thumbnails exist and if not create
them. That way I only do it once or can even have a separate app do it
"offline".

Any image assistance appreciated.

[Brock Allen]

I have a sample app that does exactly that:

http://staff.develop.com/ballen/blog...8-9aff48bf2481

I'd suggest reading the comments for the blog entry and there's a link off
to more help on the image resizing bit.

-Brock
DevelopMentor
http://staff.develop.com/ballen

I have an app that has many subdirectories containing one or more
images (jpg, gif, bmp). When the user selects a directory, my plan is
to show the images if there are only one or two, or show thumbnails if
there are more and allow the user to click on each thumbnail to view
it full size.

Right now I'm just sticking an <IMG> tag for each image into a literal
control. It works fine but the images are huge which surprised me. I
really don't know the size of the image in order to specify height and
width in the IMG tag. I tried loading them and checking the
image.height and width but, after around 6 or 7 it runs out of memory.
Very weird. I am disposing the image after each one is loaded.

But that approach is very wasteful anyway. There can't be a need to
load each image just to get the browser to display it at the proper
size. Should I try adding image controls dynamically instead of
spitting out html? Am I missing the point entirely?

The thumbnail idea also presents the same problem. It seems wasteful
to load an image and generate the thumbnail in memory each time. I
guess I can check to see if the thumbnails exist and if not create
them. That way I only do it once or can even have a separate app do it
"offline".

Any image assistance appreciated.

[dgk]

On Sun, 03 Apr 2005 08:25:09 -0700, Brock Allen
<ba****@NOSPAMd evelop.com> wrote:

I have a sample app that does exactly that:

http://staff.develop.com/ballen/blog...8-9aff48bf2481

I'd suggest reading the comments for the blog entry and there's a link off
to more help on the image resizing bit.

-Brock
DevelopMento r
http://staff.develop.com/ballen

I have an app that has many subdirectories containing one or more
images (jpg, gif, bmp). When the user selects a directory, my plan is
to show the images if there are only one or two, or show thumbnails if
there are more and allow the user to click on each thumbnail to view
it full size.

Right now I'm just sticking an <IMG> tag for each image into a literal
control. It works fine but the images are huge which surprised me. I
really don't know the size of the image in order to specify height and
width in the IMG tag. I tried loading them and checking the
image.height and width but, after around 6 or 7 it runs out of memory.
Very weird. I am disposing the image after each one is loaded.

But that approach is very wasteful anyway. There can't be a need to
load each image just to get the browser to display it at the proper
size. Should I try adding image controls dynamically instead of
spitting out html? Am I missing the point entirely?

The thumbnail idea also presents the same problem. It seems wasteful
to load an image and generate the thumbnail in memory each time. I
guess I can check to see if the thumbnails exist and if not create
them. That way I only do it once or can even have a separate app do it
"offline".

Any image assistance appreciated.

Thanks. It will take me a bit to sort though this. Setting the
contextType:
ctx.Response.Co ntentType = "image/jpeg";

tells the browser not the expect a webpage but rather an image. And
this line:
img2.Save(ctx.R esponse.OutputS tream,System.Dr awing.Imaging.I mageFormat.Jpeg );

spits it out.

But does it appear somewhere in the current webpage or open up a new
window? And how would I attach JavaScript to trigger a request for the
full image?

[Brock Allen]

Download the entire sample and run it -- the page dynamically creates <img>
to make requests for the thumbnails. It also wraps each of those <img> with
<a> so the user can click the link and get the real (non-thumbnail) image.

-Brock
DevelopMentor
http://staff.develop.com/ballen

On Sun, 03 Apr 2005 08:25:09 -0700, Brock Allen
<ba****@NOSPAMd evelop.com> wrote:

I have a sample app that does exactly that:

http://staff.develop.com/ballen/blog...d=2d8b430b-836
1-416d-9df8-9aff48bf2481

I'd suggest reading the comments for the blog entry and there's a
link off to more help on the image resizing bit.

-Brock
DevelopMentor
http://staff.develop.com/ballen

I have an app that has many subdirectories containing one or more
images (jpg, gif, bmp). When the user selects a directory, my plan
is to show the images if there are only one or two, or show
thumbnails if there are more and allow the user to click on each
thumbnail to view it full size.

Right now I'm just sticking an <IMG> tag for each image into a
literal control. It works fine but the images are huge which
surprised me. I really don't know the size of the image in order to
specify height and width in the IMG tag. I tried loading them and
checking the image.height and width but, after around 6 or 7 it runs
out of memory. Very weird. I am disposing the image after each one
is loaded.

But that approach is very wasteful anyway. There can't be a need to
load each image just to get the browser to display it at the proper
size. Should I try adding image controls dynamically instead of
spitting out html? Am I missing the point entirely?

The thumbnail idea also presents the same problem. It seems wasteful
to load an image and generate the thumbnail in memory each time. I
guess I can check to see if the thumbnails exist and if not create
them. That way I only do it once or can even have a separate app do
it "offline".

Any image assistance appreciated.

Thanks. It will take me a bit to sort though this. Setting the
contextType:
ctx.Response.Co ntentType = "image/jpeg";
tells the browser not the expect a webpage but rather an image. And
this line:
img2.Save(ctx.R esponse.OutputS tream,System.Dr awing.Imaging.I mageFormat
.Jpeg);

spits it out.

But does it appear somewhere in the current webpage or open up a new
window? And how would I attach JavaScript to trigger a request for the
full image?

[dgk]

On Sun, 03 Apr 2005 11:58:47 -0700, Brock Allen
<ba****@NOSPAMd evelop.com> wrote:

Download the entire sample and run it -- the page dynamically creates <img>
to make requests for the thumbnails. It also wraps each of those <img> with
<a> so the user can click the link and get the real (non-thumbnail) image.

Thanks a lot. It does exactly what I want. However I do not understand
how it works so I'm slogging my way through it. This is my first
experience with HttpHandlers. Cute, the only ashx file is a pointer in
web.config back to the Thumb class. Hee hee. MS documentation seems a
bit, umm, sparse on HttpHandlers. Possible questions will follow.