Creating Thumbnail Programatically (Resize Image) RRS feed

  • Question

  • User548719360 posted
    Have you ever wanted to generate thumbnails images for your site. Loading up Photoshop, and creating thousands of thumbnails can become a time consuming process. .NET has a nice library for manipulating images programatically. I have included sample code for generating thumbnails dynamically as your page loads. This should get you started. Have fun See my blog for pic of the output. http://chrisgastin.com/blog/archive/2004/11/19/154.aspx CODEBEHIND protected System.Web.UI.WebControls.Image originalImg; protected System.Web.UI.WebControls.Image resizedImg; private void Page_Load(object sender, System.EventArgs e) { Size resizeImageSize = new Size(100,100); string imgPath = @"c:\inetpub\wwwroot\ImgResizer"; string imageName = "photo15.jpg"; string thumbnailPrefix = "thumbnail-"; System.Drawing.Image srcImage= System.Drawing.Image.FromFile(imgPath+@"\"+imageName); System.Drawing.Image tnImage = srcImage.GetThumbnailImage(resizeImageSize.Width, resizeImageSize.Height, null,IntPtr.Zero); Graphics graphic = Graphics.FromImage(tnImage); graphic.CompositingQuality = CompositingQuality.HighQuality ; graphic.SmoothingMode = SmoothingMode.HighQuality ; graphic.InterpolationMode = InterpolationMode.HighQualityBicubic ; Rectangle rect = new Rectangle(0, 0, resizeImageSize.Width, resizeImageSize.Height); graphic.DrawImage(tnImage, rect); tnImage.Save(imgPath + @"\"+ thumbnailPrefix + imageName,ImageFormat.Jpeg); srcImage.Dispose(); tnImage.Dispose(); resizedImg.ImageUrl = thumbnailPrefix+imageName; } ASPX PAGE <%@ Page language="c#" Codebehind="ImgResizer.aspx.cs" AutoEventWireup="false" Inherits="ThumbnailGenerator.ImgResizer" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>WebForm1</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </HEAD>
    Original Image Thumbnail Image
    <asp:Image id="origImg" runat="server" ImageUrl="photo15.jpg"></asp:Image> <asp:Image id="resizedImg" runat="server"></asp:Image>
    Saturday, November 20, 2004 4:30 AM

All replies

  • User-1029435529 posted
    <color="#000000;width:550px;">I feel compelled to stick up for Photoshop, my favourite program. Both Photoshop's Actions and Automations will automate the creation of thumbnails, at a quality that GDI+ will never touch. Now that I've satisfied my compulsion, I want to thank you for contributing your recent code samples.</color>
    Saturday, November 20, 2004 5:27 AM
  • User-4259360 posted
    Thanks for posting the code, I have some code very similar that's downloadable. Image Uploading / Resizing and Saving. I like your code that sets the quality of the .JPG image, but is there any finer control? Photoshop / Fireworks allow a % setting such as 90% or 75%. is this possible? I've also had difficulty setting quality levels for .GIF images, most of which involve .GIFs with a transparency/alpha channel (the alpha pixels turn black). Any thoughts?
    Thursday, November 25, 2004 3:59 AM
  • User548719360 posted
    I was not knocking Photoshop by any means. I was trying to demonstrate that how you can programtically resize images.
    Saturday, November 27, 2004 1:23 AM
  • User-699064744 posted
    Thank you for the code! I was wondering if this code changes the file size downloaded to the client browser? example: myimage.jpg 2,048, 400X400 to 384 100X100 or what ever? I have fireworks and photo shop. my need is to allow the client trouble free image uploads and resizing. thank you! kes
    Thursday, December 2, 2004 10:15 AM
  • User-1153372009 posted
    Correct me if I'm wrong, but your code will resize a picture that has 350x120 (WxH) to 100x100 (WxH). An ideea is to maintain the aspect ratio using a very simple algorithm: int i_orgW = originalImg.Width; int i_orgH = originalImh.Height; /* the following variable could be set as the desired Width or Height (we will presume that it will be the desired resized Width */ int i_resize = 100; int i_newW = i_resize; // resize Width int i_newH = Convert.ToInt32(i_resize / i_orgW) * i_orgH; // resize Height By the way, as I recall, there is a limitation about the thumbnail's size (120px or so).
    Thursday, December 2, 2004 12:24 PM
  • User-123708602 posted
    That method for preseving the aspect ratio is really good, but are you sure the divide part (i_resize / i_orgW) works properly? I tried for ages to get it to work, but whenever I tried to do (int1/int2) it always returned 0; it refused to divide one value by the the other. I ended up having to do Decimal.Divide, and converting the result to an int.
    Thursday, December 9, 2004 11:41 AM
  • User944339287 posted

    y i have such problem occurs while i running the "KMG_Image-Upload-Resize.zip."


    Compiler Error Message: BC30456: 'btnAutoSingle_Click' is not a member of 'ASP.image_upload_aspx'.

    Sunday, May 15, 2005 10:07 AM
  • User494352855 posted

     To get good quality on jpegs you have to use special codec settings - don't use the defaults. Configured correctly, GDI+ will compress jpegs just as good as Photoshop and ImageReady - I tested a variety of images before building my resizing module.

    You'll also need to implement disk caching before you using image resizing in a production system.

    You can get a ready to run resizing module at http://nathanaeljones.com/products/asp-net-image-resizer/


    Wednesday, August 6, 2008 4:49 PM