Help with dynamic thumbnail generating

[DevGrp]

I'm doing my first major asp.net project. Its a photo sharing program. Its similar to this site http://www.photobob.net/viewphotos.aspx. Basically what my site does is check the photos directory for subdirectories when the page loads, then populate the dropdownlist box with the name of each subdirectory. I have the dropdownlistbox autopostback property set to true. So each time a name is selected in the dropdownlistbox, the site should check to see if there is a directory call thumbnails in that directory. If not found it should create it, then generate thumbnails images from the large pictures in the directory. The page then loads the thumbnails with a hyperlink to its corresponding large picture.

My problem is that when I make a new subdirectory in photos with the pictures, and reload the name of the directory is in dropdownlistbox. But when I select the new name, and the site is generating the thumbnails I get an error saying out of memory.

Now I can see the problem since its a lot of pictures and its generating thethumbnails when I change the selecteditem of the dropdownlistbox. I solved the problem by writing a windows service that monitors the directory and creates the thumbnails when a new directory is created. This is fine since it on my server at home. But what if I want to to host my site somewhere else? The dynamic thumbnail generation aspect would be gone

I would rather not use the windows service, since I want to keep everything together.

What would be the best way to do this?

Thanks for the help.

[hellswraith]

Is there a way you can just make the user wait until the thumbnail creation is done before redrawing the page and allowing the user to select it?

I have a Windows Forms control that creates a thumbnail strip based off of photos a user opens, and it takes a couple seconds at most to do 30-40 images. It wouldn't be too bad to make the user wait for that amount of time. Or you could just recreate the thumbnails on the fly each time the user goes to the folder. Of course, to make it look like it is faster than what it is, you would have to send out each thumbnail as it is created in the response stream.

[PT Exorcist]

hi! i am doing exactly the same but by what i understood in a different way: i have a GetThumbnail.aspx which has 2 params -> Filename and Size. Then ill have a main page who for each picture in the picture's folder calls the getthumbnail.aspx with the desired file size and the filename.

but i am having a problem...when i try to make the thumbnail using the getthumbnail the picture's get a resolution of 96 dpi...that in IE looks like they are bigger than actually they are...could u share with me the part of the code of dinamic image creation devgrp?

[DevGrp]

When I get home I'll post the code. Its real easy to create a thumbnail. The image and bitmap class has a getthumbnail method to create the thumbnail.

I have an idea of what I could do, so I would have to use the windows service. I am going to use a webservice. So each time the user select an item from the ddlistbox, I call the webservice to generate the thumbnails then display them.

[PT Exorcist]

hmm well actually ive done some coding about thumbnail creation but it has several *bugs*:
1. the resolution of the images
2. the resized images seem somewhat blur

Bitmap bit = new Bitmap(1,1);
bit.SetResolution(72, 72);
System.Drawing.Image thumbnail = bit;

Graphics g = Graphics.FromImage(thumbnail);
g.CompositingQuality = CompositingQuality.GammaCorrected;
g.PixelOffsetMode = PixelOffsetMode.Half;
System.Drawing.Image img = bit;

thumbnail = bm.GetThumbnailImage(width , height, new System.Drawing.Image.GetThumbnailImageAbort(Thumbnail), IntPtr.Zero);
            
Response.ContentType = "image/jpeg";
thumbnail.Save(Response.OutputStream, ImageFormat.Jpeg); 

but i'd be happy to see ur code

[DevGrp]

This is the code I use.

foreach(FileInfo fi in pics)
{
	System.Drawing.Image temp = System.Drawing.Image.FromFile(@"C:\Inetpub\wwwroot\PhotoMan\Photos\" + ddlCat.SelectedItem.Text + @"\" + fi.Name);
	System.Drawing.Image img = temp.GetThumbnailImage(160, 120, null, IntPtr.Zero);
					
	try
	{
		img.Save(Page.Server.MapPath(@"\PhotoMan\Photos\" + ddlCat.SelectedItem.Text + @"\" + @"Thumbnails\" + fi.Name, System.Drawing.Imaging.ImageFormat.Jpeg));
	}  
	catch(Exception ex)
	{
		Response.Write(ex.StackTrace);
	}
	finally
	{		
                               temp.Dispose();
                               img.Dispose();
	}
}

[PT Exorcist]

(@"C:\Inetpub\wwwroot\PhotoMan\Photos\"

use Server.MapPath() instead

[DevGrp]

Thanks

[PT Exorcist]

its strange but with ur example i dont get that damn strange resolution values...thanks

[PT Exorcist]

anyways ur sample too suffers from my sample problem: the resized image is not nitid..its blur...

[DevGrp]

There should be a way to stop get the pictures resized without them being blurred. There is an enum with some options you can pass to the graphic class. I forgot the name. I look it up when I get home.

[PT Exorcist]

but i have to pass them before doing the GetThumbs right? anyways the post i think u are refering to was brough up ot the first page by me two days ago in VB.NET forum

[PT Exorcist]

i even tryed the ways that i saw on that MrPolite's post and i still can't do it the right way(maybe im doin that wrong dunno..):

        public static void CreateThumbnail(System.Web.UI.Page parent, string filename, int desiredSize) {
            Image temp = Image.FromFile(parent.Server.MapPath(filename));
            Size tmpSize = new Size(temp.Width, temp.Height);
            Size resSize = GetSize(desiredSize, ref tmpSize);

            Bitmap bm = new Bitmap(1,1);
            Image img = bm;
            Graphics g = Graphics.FromImage(temp);
            Graphics g2 = Graphics.FromImage(img);

            g.InterpolationMode = InterpolationMode.NearestNeighbor;
            g.PixelOffsetMode = PixelOffsetMode.Half;

            g2.InterpolationMode = InterpolationMode.NearestNeighbor;
            g2.PixelOffsetMode = PixelOffsetMode.Half;

            img = temp.GetThumbnailImage(resSize.Width, resSize.Height, null, IntPtr.Zero);

            parent.Response.ContentType = "image/jpeg";
            img.Save(parent.Response.OutputStream, ImageFormat.Jpeg);

            temp.Dispose();
            img.Dispose();
        } 

here is the result of this code:

and here is the original image:

so...how i am suposed to do this?

[hellswraith]

I don't know if any of this will help you, but you might want to take a look.

I use these methods in a image viewer I created:

		private void ScaleImageToFit(string filename)
		{
			// This will take in a file path, figure out the available view
			// area, then make the passed in picture fit that area.
			Bitmap pic = new Bitmap(filename);

			SizeF sizef = new SizeF(pic.Width / pic.HorizontalResolution, 
									pic.Height / pic.VerticalResolution);

			float fScale = Math.Min(viewArea.Width / sizef.Width, 
									viewArea.Height / sizef.Height);

			sizef.Width *= fScale;
			sizef.Height *= fScale;

			viewAreaPic.Width = (int)sizef.Width;
			viewAreaPic.Height = (int)sizef.Height;
			
			viewAreaPic.Image = pic;
		}

		private void ZoomIn()
		{
			//Code here zooms in on the current picture
			Bitmap pic = new Bitmap(thumbPanel.CurrentThumbPath);
			int ix;
			int iy;
			int iZoomRate = 100;
			
			if (viewAreaPic.Width > viewAreaPic.Height)
			{
				ix = viewAreaPic.Width + iZoomRate;
				iy = (viewAreaPic.Width + iZoomRate) * viewAreaPic.Height / viewAreaPic.Width;
			}
			else
			{
				iy = viewAreaPic.Height + iZoomRate;
				ix = (viewAreaPic.Height + iZoomRate) * viewAreaPic.Width / viewAreaPic.Height;
			}

			pic = (Bitmap)(pic.GetThumbnailImage(ix, iy, null, (IntPtr)0));
			viewAreaPic.SizeMode = PictureBoxSizeMode.AutoSize;
			viewAreaPic.Image = pic;
		}

		private void ZoomOut()
		{
			Bitmap pic = new Bitmap(thumbPanel.CurrentThumbPath);
			int ix;
			int iy;
			int iZoomRate = -100;
			
			if (viewAreaPic.Width > viewAreaPic.Height)
			{
				ix = viewAreaPic.Width + iZoomRate;
				iy = (viewAreaPic.Width + iZoomRate) * viewAreaPic.Height / viewAreaPic.Width;
			}
			else
			{
				iy = viewAreaPic.Height + iZoomRate;
				ix = (viewAreaPic.Height + iZoomRate) * viewAreaPic.Width / viewAreaPic.Height;
			}
			
			pic = (Bitmap)(pic.GetThumbnailImage(ix, iy, null, (IntPtr)0));
			viewAreaPic.SizeMode = PictureBoxSizeMode.AutoSize;
			viewAreaPic.Image = pic;
		}

		private System.IO.Stream ReduceResolution(Bitmap pic, int iQuality)
		{
			Graphics g;
			g = Graphics.FromImage(pic);

			// Don't know if I need these....
			g.SmoothingMode = SmoothingMode.AntiAlias;
			g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;

			ImageCodecInfo[] codecs;
			codecs = ImageCodecInfo.GetImageEncoders();
            
			EncoderParameters param = new EncoderParameters(1);
			EncoderParameter quality = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, iQuality);

			param.Param(0) = quality;
			
			pic.Save(theStream,codecs[1], param);

			return theStream;
		}

[PT Exorcist]

i am having some problems implementing that code in my code..and i saw some bugs(or not?) like this:

param.Param(0) = quality;

shouldnt this be:

param.Param[0] = quality;

and why i do keep getting an error here?

            Image temp = Image.FromFile(parent.Server.MapPath(filename));
            Size tmpSize = new Size(temp.Width, temp.Height);
            Size resSize = GetSize(desiredSize, ref tmpSize);

            Bitmap bm = new Bitmap(1,1);
            Image img = bm;
            Graphics g = Graphics.FromImage(temp);
            Graphics g2 = Graphics.FromImage(img);

            ImageCodecInfo[] codecs;
            codecs = ImageCodecInfo.GetImageEncoders();
            
            EncoderParameters param = new EncoderParameters();
            EncoderParameter quality = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100);

            param.Param[0] = quality;

            img = temp.GetThumbnailImage(resSize.Width, resSize.Height, null, IntPtr.Zero);

            parent.Response.ContentType = "image/jpeg";
            img.Save(parent.Response.OutputStream, codecs[1], param);

            temp.Dispose();
            img.Dispose(); 

[hellswraith]

Yes, after looking some more, I haven't actually incorporated the ReduceResolution function and put it to use yet. So that is why there are probably some errors in that one.

You might want to look at this line though, it might help smooth out the images a little more for you (again, I haven't actually used them yet so they may not work, but worth a try):

g.SmoothingMode = SmoothingMode.AntiAlias;

[PT Exorcist]

i had tried antialias and it didnt help nothing =(

[PT Exorcist]

devgrp did u find any usefull info?

[DevGrp]

Not really, I'm trying some different things with web services and multi-threading. I let you know how it goes.