我心中的核心組件~HttpHandler和HttpModule實現圖像的縮放與Url的重寫

文章出處

說在前

對于資源列表頁來說，我們經常會把圖像做成Ｎ多種，大圖，小圖，中圖等等，很是麻煩，在數據遷移時，更是一種痛快，而如果你把圖像資源部署到nginx上，那么這種圖像縮放就變得很容易了，因為它有自己的過濾器來實現這個功能，只要程序員簡單的配置即可（GraphicsMagick），其實在nginx上實現縮略圖的方式有很多，而對于ＩＩＳ服務來說，實現這種縮略圖就沒有直接的方法了，必須開發人員自己寫代碼來實現，下面解釋兩個比較早的技術（被執行的期間比較早，在頁面渲染之前）HttpModule和httpHandler，這兩個東西我在之前的文章中也已經講過，細節不再重復。[HttpModule幾大事件,HttpHandler實現圖像防盜鏈]

做在后

一　HttpModule對URL地址進行重寫，將擴展名為jpg,jpeg,png,gif結尾的URL地址進行復寫，讓它支持漂亮的縮略圖參數，如原地址為：new1.jpg，實現縮略圖原地址為：new1.jpg?w=100&h=100，進行Url重寫后的漂亮地址為：new1_100x100.jpg，怎么樣，是否是很漂亮，有點像MVC 的router吧，呵呵

    /// <summary>
    /// 實現URL的重寫
    /// </summary>
    public class UrlRewriteModule : IHttpModule
    {
        #region IHttpModule 成員

        public void Init(HttpApplication context)
        {
            context.BeginRequest += new EventHandler(Application_BeginRequest);
        }
        /// <summary>
        /// url重寫
        /// .png?w=100&h=100
        /// _100x100.png
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Application_BeginRequest(Object sender, EventArgs e)
        {
            string oldUrl = HttpContext.Current.Request.RawUrl;
            if (oldUrl.LastIndexOf(".") > -1)
            {
                string ext = oldUrl.Substring(oldUrl.LastIndexOf(".")).ToLower();
                //是圖像文件
                if (ext == ".jpg"
                    ||
                    ext == ".jpeg"
                    ||
                    ext == ".png"
                    ||
                    ext == "gif")
                {
                    var param = oldUrl.Substring(oldUrl.LastIndexOf("_") + 1, (oldUrl.IndexOf(".") - oldUrl.LastIndexOf("_") - 1)).Split(new char[] { 'x' }, StringSplitOptions.RemoveEmptyEntries);
                    //有圖像縮放請求
                    if (oldUrl.LastIndexOf("_") > -1)
                    {
                        string newUrl = oldUrl.Substring(0, oldUrl.LastIndexOf("_"));
                        newUrl = string.Format(newUrl + ext + "?w={0}&h={1}", param[0], param[1]);
                        //將請求中的URL進行重寫  
                        HttpContext.Current.RewritePath(newUrl);
                    }
                }
            }

        }

        #endregion

        #region IHttpModule 成員

        public void Dispose()
        {
        }

        #endregion
    }

二　使用HttpHandler進行對圖像的縮放，你的服務器是指與圖像資源在一起的那臺電腦

    /// <summary>
    /// 圖片動態縮放處理程序
    /// </summary>
    public class ImageScalingHandler : IHttpHandler
    {
        /// <summary>
        /// 圖像等比例縮放，圖像默認為白色
        /// </summary>
        /// <param name="image"></param>
        /// <param name="width"></param>
        /// <param name="height"></param>
        /// <returns></returns>
        private Bitmap CreateThumbnail(Image image, int width, int height)
        {
            Point point = new Point(0, 0); //圖像從那個坐標點進行截取
            double wRate = 1, hRate = 1, setRate = 1;
            int newWidth = 0, newHeight = 0;
            try
            {
                if (width == 0) width = image.Width;
                if (height == 0) height = image.Height;

                if (image.Height > height)
                {
                    hRate = (double)height / image.Height;
                }

                if (image.Width > width)
                {
                    wRate = (double)width / image.Width;
                }

                if (wRate != 1 || hRate != 1)
                {
                    if (wRate > hRate)
                    {
                        setRate = hRate;
                    }
                    else
                    {
                        setRate = wRate;
                    }
                }

                newWidth = (int)(image.Width * setRate);
                newHeight = (int)(image.Height * setRate);
                if (height > newHeight)
                {
                    point.Y = Convert.ToInt32(height / 2 - newHeight / 2);
                }
                if (width > newWidth)
                {
                    point.X = Convert.ToInt32(width / 2 - newWidth / 2);
                }


                Bitmap bit = new Bitmap(width, height);
                Rectangle r = new Rectangle(point.X, point.Y, (int)(image.Width * setRate), (int)(image.Height * setRate));
                Graphics g = Graphics.FromImage(bit);
                g.Clear(Color.White);
                g.DrawImage(image, r);
                g.Dispose();
                return bit;
            }
            catch (Exception)
            {
                throw;
            }
        }

        /// <summary>
        /// 處理請求
        /// </summary>
        /// <param name="context"></param>
        public void ProcessRequest(HttpContext context)
        {
            int w = 0, h = 0;
            int.TryParse(context.Request.QueryString["w"], out w);
            int.TryParse(context.Request.QueryString["h"], out h);
            Image image = Image.FromFile(context.Request.PhysicalPath);
            context.Response.ContentType = "image/jpeg";
            Bitmap bitMap = CreateThumbnail(image, w, h);
            bitMap.Save(context.Response.OutputStream, ImageFormat.Jpeg);
            image.Dispose();
            bitMap.Dispose();
            context.Response.End();
        }

        public bool IsReusable
        {
            get { return false; }
        }
    }

三　最后就是在Module和Handler的入口配置的，即如何將它們加入到當然網站中，我們采用web.config配置的方法

 <system.web>
    <httpModules>
      <!-- this is for Classic mode and Cassini -->
      <add name="UrlRewriteModule" type="EntityFrameworks.Web.Core.HttpModules.UrlRewriteModule,EntityFrameworks.Web.Core" />
    </httpModules>
  </system.web>

<system.webServer>

    <modules runAllManagedModulesForAllRequests="true" >
      <!--This is for Integrated mode-->
      <add name="UrlRewriteModule" type="EntityFrameworks.Web.Core.HttpModules.UrlRewriteModule,EntityFrameworks.Web.Core" />
    </modules>

    <handlers>
      <add name="ImageFunction1" path="*.jpg" verb="GET" type="EntityFrameworks.Web.Core.HttpHandlers.ImageScalingHandler,EntityFrameworks.Web.Core"  />
      <add name="ImageFunction2" path="*.png" verb="GET" type="EntityFrameworks.Web.Core.HttpHandlers.ImageScalingHandler,EntityFrameworks.Web.Core"  />
      <add name="ImageFunction3" path="*.gif" verb="GET" type="EntityFrameworks.Web.Core.HttpHandlers.ImageScalingHandler,EntityFrameworks.Web.Core"  />
      <add name="ImageFunction4" path="*.jpeg" verb="GET" type="EntityFrameworks.Web.Core.HttpHandlers.ImageScalingHandler,EntityFrameworks.Web.Core"  />
</handlers>