asp.Net thumbnail on the fly

Af Christian Kragh

Opdateret: 20-10-2011

Ændre størrelsen on the fly

Hvis du har et fotoalbum på nettet er det mest almindeligt at man har et lille billede i en oversigt og hvis man er interesseret i det billede at man så kan hente det i stor størrelse.

Det kræver dog at man selv laver et stort og et lille billede som man lægger på serveren, eller at man har et "program/script" der gør det for en.

Her vil jeg vise hvordan man kan ændre størrelsen efter brugerens ønske.

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.IO" %>
<script language="C#" runat="server">
 private const int  _ThumbSize = 70;       // Thumb size width

 private const string _imagepath = "./";       // Image path
 private const string _cachePath = "cache/";     // Cache path, if enable

 private string chacename(string path, int size) {
  return Server.UrlEncode(size.ToString() + "_" + path.Replace(Server.MapPath("."),"").Replace("/","").Replace(" ",""));
 }

 void Page_Load(Object sender, EventArgs e) {
  bool cacheEnabled = ((Request.QueryString["cache"] != null) && (Request.QueryString["cache"] == "1"));
  try {
   bool forceaspect = true;
   int newHeight = _ThumbSize;
   int newWidth = _ThumbSize;

   int reqHeight = newHeight;
   int reqWidth = newWidth;
   int origHeight;
   int origWidth;

   string imageLocation = Server.MapPath(_imagepath + Request.QueryString["Image"]);

   string cacheName = this.chacename(Request.QueryString["Image"], reqWidth);
   if (System.IO.File.Exists(Server.MapPath(_cachePath + cacheName))) {
    Response.Redirect (_cachePath + Server.UrlEncode(cacheName), false);
    return;
   }

   Response.ContentType = "image/jpeg";

   System.Collections.Hashtable imageOutputFormatsTable = new System.Collections.Hashtable();
   imageOutputFormatsTable.Add(System.Drawing.Imaging.ImageFormat.Gif.Guid, System.Drawing.Imaging.ImageFormat.Gif);
   imageOutputFormatsTable.Add(System.Drawing.Imaging.ImageFormat.Jpeg.Guid, System.Drawing.Imaging.ImageFormat.Jpeg);
   imageOutputFormatsTable.Add(System.Drawing.Imaging.ImageFormat.Bmp.Guid, System.Drawing.Imaging.ImageFormat.Gif);
   imageOutputFormatsTable.Add(System.Drawing.Imaging.ImageFormat.Tiff.Guid, System.Drawing.Imaging.ImageFormat.Jpeg);
   imageOutputFormatsTable.Add(System.Drawing.Imaging.ImageFormat.Png.Guid, System.Drawing.Imaging.ImageFormat.Jpeg);

   System.Drawing.Bitmap origBitmap = new System.Drawing.Bitmap(imageLocation);
   System.Drawing.Imaging.ImageFormat outputFormat = (System.Drawing.Imaging.ImageFormat)imageOutputFormatsTable[origBitmap.RawFormat.Guid];

   System.Drawing.Bitmap outputImage = null;
   System.Drawing.Graphics OverlayImage = null;

   origHeight = origBitmap.Height;
   origWidth = origBitmap.Width;
   if (origBitmap.Height >= origBitmap.Width) {
    newHeight = reqHeight;
    newWidth = (int)(((double)origBitmap.Width / (double)origBitmap.Height) * reqHeight);
   } else {
    newWidth = reqWidth;
    newHeight = (int)(((double)origBitmap.Height / (double)origBitmap.Width) * reqWidth);
   }
   outputImage = new System.Drawing.Bitmap(origBitmap, newWidth, newHeight);

   outputImage.SetResolution(72, 72);

   outputImage.Save(Response.OutputStream, outputFormat);

   try {
    outputImage.Save(Server.MapPath(_cachePath + cacheName), outputFormat);
   }
   catch (Exception ex) {
    log(ex.Message + " - saving cache - ");
   }

   outputImage.Dispose();
   origBitmap.Dispose();
  }
  catch (Exception ex) {
   if (ex.InnerException != null) {
    log(ex.Message + ". Inner: " + ex.InnerException.Message);
   } else {
    log(ex.Message);
    Response.Redirect("error.png");
   }
  }
 }

 private void log(string text) {
  System.IO.StreamWriter sw = null;
  try {
   sw = new System.IO.StreamWriter(Server.MapPath("errorthumb.txt"), true);
   sw.WriteLine("Error: " + text + ". Request:" + Request.QueryString.ToString());
  }
  catch { }
  finally {
   if (sw!=null) sw.Close();
  }
 }
</script>

Fordelen er at man kun skal lægge billederne op på serveren i den størrelse brugeren skal se dem i og så klare scriptet ændringen af størrelsen for deres thumbnail.

Senere viser jeg hvordan man kan skrive tekst på billedet og hvordan man kan lægge et logo ind.

Jeg har disse 3 billeder jeg vil lave om.

Resultatet:

Du kan downloade alle filerne i eksemplet her.