What is the best way to resize an image?

[Guest]

Hello all!

I been trying to get a handle with Images. I have learned alot from the fine
people here. So, I also learned that thumbnail images look terrible taken
from a digital cam. I know why they look bad. So what is the best way to
resize an image. I'm not too concerned about size, but I guess I would like
to compress it on the upload.

Any thoughts?

Thanks!

Rudy

 

[Steve C. Orr [MVP, MCSD]]

You can resize the image using the GetThumbnailImage method.
Here's more info:
http://msdn.microsoft.com/library/d...emDrawingImageClassGetThumbnailImageTopic.asp

Or maybe you'll find these custom functions useful that I wrote:

public Image DisplaySize(Bitmap bmp)
{
Response.Write(bmp.Width.ToString());
Response.Write(bmp.Height.ToString());
}

//shrink the image proportionately so that neither height nor width is more
than [NewSize] pixels

public System.Drawing.Image ShrinkImage(System.Drawing.Bitmap bmp, int
NewSize)

{

double NewWidth;

double NewHeight;

double ShrinkPercent;

System.Drawing.Image.GetThumbnailImageAbort myCallback =

new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);

if (bmp.Width>bmp.Height)

{

NewWidth=NewSize;

ShrinkPercent=(NewWidth/bmp.Width)*100;

NewHeight=(ShrinkPercent/100)*bmp.Height;

}

else

{

NewHeight=NewSize;

ShrinkPercent=(NewHeight/bmp.Height)*100;

NewWidth=(ShrinkPercent/100)*bmp.Width;

}

System.Drawing.Image myShrunkenImage =
bmp.GetThumbnailImage((int)NewWidth,(int)NewHeight,myCallback,IntPtr.Zero);

return myShrunkenImage;

}

public bool ThumbnailCallback(){return false;}

 

[Kevin Spencer]

It all depends. If you look at Steve's answer, you will see one way of doing
it. However, if, for example, you want to have a page of thumbnails and
links on each thumbnail to the full-sized image, you may not want to make a
smaller image, but display the image smaller in the browser, using
attributes or style. This, in effect, pre-loads the images, so that when the
thumbnail is clicked on it takes no time for the browser to display the
already-cached image.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
What You Seek Is What You Get.

 

[Guest]

Hi Kevin!

Would you have an example on how I would do that?

 

[Kevin Spencer]

Sure Rudy:

<a href="/images/someimage.jpg"><img src="/images/someimage.jpg"
style="width:200;height:200"></a>

In the above example, it doesn't matter what size the actual image file is.
The browser will resize it to the specified height and width. NOTE: If you
only set height OR only set width, the other dimension will resize
proportionately. The hyperlink is to the image itself, not a web page. If
the link is clicked, the image will be displayed by itself, un-resized.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
What You Seek Is What You Get.

 

[Bruce Barker]

though your page may take forever to load. a slicker approach is to use
thumbnails, but preload the full size images with javascript (use the Image
object).

-- bruce (sqlwork.com)

 

[Steve C. Orr [MVP, MCSD]]

This technique is certaintly a good one sometimes, but it can be inefficient
with bandwidth because you're sending the whole (large) image when the
browser is only displaying a tiny version of it.

 

[Guest]

Hi Guys!
Kevin, I'll try that tonite and let you know. Bruce, I'm trying to get away
from thumbnails, because they look so pixaleted. I like the idea of
thumbnail, but it doesn't seem to display very clean. Most of the pict's are
from a digital camera, probably set at high quality. Iwould be willing to
sacrefice perfromance for a good pic. Not sure though, I'll try anything.
Thank you both for your suggestions!

Rudy

 

[Guest]

Hi Steve,
It seems like there is no middle ground. Either go for good performance or
good pics at a resonable size. I saw your code, do you have a copy of that in
vb.net?

You know there is a program called Microsoft Picture manager. I was
experminting last night with the size of my images. There is an option that
prorgram will compress just for a web page. It took the file size down like
from 340k to 30k. The image was smaller, but bigger than a thumbnail, but it
looked great! So I'm thinking if there is a way to convert that file once
it's uploaded, and resave it. I also have looked into converting into png,
not sure if that a way to go.
I'm not to worried about space on my hard drive, I'll have plenty. I don't
want it to be a hassle for people to be restricted of what size to send up,
sticking witht the standard 4mb limit.

Thanks for your time!!

Rudy

 

[Guest]

Hi Kevin!

I tried your example, couldn't get it to work. Let me show you what I have
for HTML. I'm sure I'm just placing it in wrong. Thanks for all yur help!!

Rudy
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">

<asp:Repeater id="rptPics" runat="server">
<ItemTemplate>
<br>
<asp:Image ImageUrl='<%# Container.DataItem ("filePath") %>'
Runat="server" />
</ItemTemplate>
</asp:Repeater></form>
</body>

 

[Kevin Spencer]

Hi Rudy!

Well, to be honest, you didn't actually try my example. You could try my
example by copying and pasting the HTML into a new HTML document,
substituting an actual image URL, and viewing it in a browser. IOW, my
example, is pure HTML, with no server-side aspect to it.

I'm not sure what "didn't work" means in this context. I do notice that
there is not hyperlink in the code you posted, remember that the image in my
example is hyperlinked to the URL of the image itself.

BTW, another alternative to showing the image in the same browser instance
is to use a "target" attribute in the image to launch a new browser
instance, as in:

<a href="/images/someimage.jpg"
target="_blank"><img src="/images/someimage.jpg"
style="width:200;height:200"></a>

If you're having a problem with something else (other than the missing
hyperlink) can you describe it fully? Remember that your posted code has no
server-side code in it, only Controls. What, for example, is
Container.DataItem("filePath") referring to?

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
What You Seek Is What You Get.

 

[Guest]

Hi Kevin!
Sorry for the confusion. Sometimes I forget to give the whole setup. I have
a SQL table that holds my filename info and file path info. I know I can
store images in SQL, but decided against it. So <asp:Image ImageUrl='<%#
Container.DataItem ("filePath") %>' is pulling the info from the column
"filepath", and bringing up my pics in a datalist.
So your right, I didn't try your way as you had it laid out. I was trying to
add in to my code, with slight modifications. So I know your code works
straight away, but is there a way to do what you suggested the way I have my
code?

Obviously I'm a newbie at this, so I'm trying alot of diffrent methods, to
try and figure out which one will work the best. It's also a great way to
learn, although frustrating at times. My basic idea on this website is to
have people login, and have the ability to upload pictures. I would like to
have like a personal page to show off thier pictures, in this case Great
Danes. So every user will have a personal gallery, where they can add
pictures or remove.
I also want to have a public gallery so people can just look at pics, but
have the info of the owner below the pic, so they can click on the user name,
and see all of the danes that person has. It's more for breeding purposes, so
people can pick a dog on it's look.
Anyway, that is basicly what I'm trying to do. But as a newbie, it's hard to
deside which is the best way to do this. There are so many ways of doing
basicly the same thing, it get's confusing sometimes.

So to wrap up, I need a good way without thumbnails, to present a pic in a
smaller size, to fit many on a page, that look good.

I can give you my server side code later today when I get home, but it's
basicly having a data list hook into my SQL db.

Thanks again for all your help Kevin!

Rudy

 

[Kevin Spencer]

Hi Rudy,

Sounds like your code is getting the images as it should. All you need to do
is add the hyperlink. You can use the same code for getting the image URL
that you're already using, inside the hyperlink.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
What You Seek Is What You Get.

 

[Guest]

Hi Kevin!

Thank you so much! I'm happy to say I finally figured it out with your
help. It works perfect! Why would anybody want to use thumbnails when you
can adjust the size by this method. Thanks again for all your help!
I'm placing the code I used below to make this work, for anybody else who is
interested!

<asp:Repeater id="rptPics" runat="server">
<ItemTemplate>
<br>
<a href= '<%# Container.DataItem ("filePath") %>'><img src= '<%#
Container.DataItem ("filePath") %>' style="width:200" Runat="server"/>
</a>
</ItemTemplate>
</asp:Repeater></form>

Rudy

 

[Kevin Spencer]

Nice work, Rudy!

There ARE situations in which Thumbnails are useful, and situations in which
literal resizing of images is useful. However, in your case, I believe you
went with the right method for "preloading" the images.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
What You Seek Is What You Get.