網(wǎng)站性能優(yōu)化：動態(tài)縮略圖技術實現(xiàn)思路

　　在網(wǎng)站開發(fā)過程中，大家都是如何解決多尺寸圖片縮略圖問題的呢？猶為典型的是電商網(wǎng)站，據(jù)了解，淘寶的圖片縮略圖是直接存儲多張縮略圖的方式，以滿足各種情況下使用，因為它有牛逼的開源+自主開發(fā)的海量圖片存儲架構作支撐。但是，我們在做網(wǎng)站時，并不可能直接搬牛逼的架構過來，就可以達到預期的效果，況且各種成本投入也是有限的。所以一般性能優(yōu)化的原則大都是這樣：先考慮軟件的優(yōu)化，再考慮硬件的升級，當然土豪客戶則除外。

　　很多網(wǎng)站可能沒有對圖片進行縮略圖處理，上傳時圖片可能幾百KB，在頁面也是直接加載幾百KB的圖片大小，這樣極為占用帶寬，影響網(wǎng)站加載速度。也有很多網(wǎng)站的做法可能也是直接根據(jù)前端頁面所需求圖片的尺寸，在上傳時就處理生成相應尺寸的縮略圖，但如果前端頁面布局進行調(diào)整時，可能就得調(diào)整縮略圖生成的尺寸，之前生成的圖片也有可能需要重新生成。之前我在一個網(wǎng)站項目時就遇到這樣的問題，經(jīng)過一系列地驗證，最終是采用動態(tài)縮略圖技術解決的，現(xiàn)在整理出來給大家分享分享。

　　其實，原理很簡單，通過高性能的圖片壓縮算法，在一般處理程序（HttpHandler）對圖片進行壓縮處理，圖片路徑則直接指向HttpHandler，將圖片路徑、需要壓縮的寬高等參數(shù)傳進去，實現(xiàn)動態(tài)壓縮。

　　在網(wǎng)站目錄下新建 ResizeImage.ashx 文件，代碼如下：

  1 using System;  2 using System.Collections.Generic;  3 using System.Linq;  4 using System.Web;  5 using System.IO;  6 using System.Drawing.Imaging;  7 using System.Drawing;  8   9 namespace www.ideek.cn 10 { 11     /// <summary> 12     /// 動態(tài)縮略圖處理程序 13     /// 調(diào)用示例： <img runat="server" src="~/ResizeImage.ashx?src=/Upload/20140428/www_ideek_cn.jpg&width=128&height=128" /> 14     /// </summary> 15     public class ResizeImageHandler : IHttpHandler 16     { 17         public void PRocessRequest(HttpContext context) 18         { 19             context.Response.ContentType = "text/plain"; 20             string fileName = context.Server.UrlDecode(context.Request["src"]); 21             if (string.IsNullOrEmpty(fileName)) 22             { 23                 context.Response.Write("缺少參數(shù)src."); 24                 return; 25             } 26             fileName = Server.MapPath("~/" + fileName); 27  28             Stream fileStream = null; 29             try 30             { 31                 string wStr = context.Request["width"]; 32                 string hStr = context.Request["height"]; 33                 int width = 0, height = 0; 34                 if (!string.IsNullOrEmpty(wStr) && !string.IsNullOrEmpty(hStr)) 35                 { 36                     int.TryParse(wStr, out width); 37                     int.TryParse(hStr, out height); 38                 } 39  40                 FileInfo fi = new FileInfo(fileName); 41                 if (!fi.Exists) 42                 { 43                     context.Response.Write("圖片不存在."); 44                     return; 45                 } 46                 string contentType = getContentType(fi.Extension); 47                 context.Response.ContentType = contentType; 48  49                 //只能處理jpg及png圖片格式，沒有寬高參數(shù)不進行縮放處理 50                 if (width > 0 && height > 0 && (contentType.Contains("jpeg") || contentType.Contains("png"))) 51                 { 52                     Image image = Image.FromFile(fi.FullName); 53                     int sWidth = image.Width, sHeight = image.Height; 54                     int nWidth = 0, nHeight = 0; 55                     if (sWidth > width || sHeight > height) 56                     { 57                         if (((double)sWidth / (double)sHeight) > ((double)width / (double)height)) 58                         { 59                             //以寬度為基準縮小 60                             if (sWidth > width) 61                             { 62                                 nWidth = width; 63                                 nHeight = (int)(width * sHeight / (double)sWidth); 64                             } 65                             else 66                             { 67                                 nWidth = sWidth; 68                                 nHeight = sHeight; 69                             } 70                         } 71                         else 72                         { 73                             //以高度為基準縮小 74                             if (sHeight > height) 75                             { 76                                 nWidth = (int)(height * sWidth / (double)sHeight); 77                                 nHeight = height; 78                             } 79                             else 80                             { 81                                 nWidth = sWidth; 82                                 nHeight = sHeight; 83                             } 84                         } 85  86                         Bitmap bitmap = new Bitmap(nWidth, nHeight, PixelFormat.Format32bppArgb); 87                         Graphics graphics = Graphics.FromImage(bitmap); 88                         graphics.Clear(Color.White); 89                         graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighSpeed;  //平滑處理 90                         graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;  //縮放質(zhì)量 91                         graphics.DrawImage(image, new Rectangle(0, 0, nWidth, nHeight)); 92                         image.Dispose(); 93  94                         EncoderParameters parameters = new EncoderParameters(1); 95                         parameters.Param[0] = new EncoderParameter(Encoder.Quality, ((long)80));  //圖片質(zhì)量參數(shù) 96  97                         fileStream = new MemoryStream(); 98                         bitmap.Save(fileStream, GetImageCodecInfo(contentType), parameters); 99                         using (MemoryStream ms = new MemoryStream())100                         {101                             bitmap.Save(ms, GetImageCodecInfo(contentType), parameters);102                             context.Response.OutputStream.Write(ms.GetBuffer(), 0, (int)ms.Length);103                         }104                         parameters.Dispose();105                         bitmap.Dispose();106                         return;107                     }108                     if (image != null)109                         image.Dispose();110                 }111                 else112                 {113                     fileStream = new FileStream(fi.FullName, FileMode.Open);114                     byte[] bytes = new byte[(int)fileStream.Length];115                     fileStream.Read(bytes, 0, bytes.Length);116                     fileStream.Close();117                     context.Response.BinaryWrite(bytes);118                 }119             }120             catch (Exception ex)121             {122                 context.Response.Write(ex.Message);123             }124             finally125             {126                 if (fileStream != null)127                 {128                     fileStream.Close();129                     fileStream.Dispose();130                 }131             }132             System.GC.Collect();133         }134 135 136         /// <summary>137         /// 獲取文件下載類型138         /// </summary>139         /// <param name="extension"></param>140         /// <returns></returns>141         private string getContentType(string extension)142         {143             string ct = string.Empty;144             switch (extension.ToLower())145             {146                 case ".jpg":147                     ct = "image/jpeg";148                     break;149                 case ".png":150                     ct = "image/png";151                     break;152                 case ".gif":153                     ct = "image/gif";154                     break;155                 case ".bmp":156                     ct = "application/x-bmp";157                     break;158                 default:159                     ct = "image/jpeg";160                     break;161             }162             return ct;163         }164 165         //獲得包含有關內(nèi)置圖像編碼解碼器的信息的ImageCodecInfo 對象.166         private ImageCodecInfo GetImageCodecInfo(string contentType)167         {168             ImageCodecInfo[] arrayICI = ImageCodecInfo.GetImageEncoders();169             ImageCodecInfo jpegICI = null;170             for (int x = 0; x < arrayICI.Length; x++)171             {172                 if (arrayICI[x].MimeType.Equals(contentType))173                 {174                     jpegICI = arrayICI[x];175                     //設置JPEG編碼176                     break;177                 }178             }179             return jpegICI;180         }181 182         public bool IsReusable183         {184             get185