使用 C# 產生網頁縮圖

在 Web 2.0 網站中，我們常可以看到分享文章或是推薦網站的快照縮圖（Snapshot Thumbnail），來供使用者預覽。如果要在 .NET 中要實做網頁快照，你可以使用 WebBrowser 控制項來達成。在本文中將會示範如何建立 Windows 應用程式來擷取網頁快照並產生縮圖。

範例程式碼

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

namespace SnapExample
{
    public partial class MainForm : Form
    {
        private WebPageSnapshot _wps = new WebPageSnapshot(1024, 768);

        public MainForm()
        {
            InitializeComponent();            
            _wps.ImageCompleted += new ImageCompletedEventHandler(RefreshImage);
        }
                               
        private void uxGo_Click(object sender, EventArgs e)
        {
            EnableButtons(false);
            _wps.GenerateAsync(uxUrl.Text);                        
        }

        private void uxSaveAs_Click(object sender, EventArgs e)
        {
            uxSaveFileDialog.DefaultExt = "jpg";
            uxSaveFileDialog.AddExtension = true;
            uxSaveFileDialog.Filter = "JPEG(*.jpg)|*.jpg";
            uxSaveFileDialog.ShowDialog(this);

            string fileName = uxSaveFileDialog.FileName;
            if (fileName != string.Empty)
            {
                uxThumbnail.BackgroundImage.Save(fileName);
            }
        }

        private void RefreshImage(Image image)
        {                        
            decimal sizeRatio = ((decimal)image.Height / image.Width);

            int thumbWidth = 100;
            int thumbHeight = decimal.ToInt32(sizeRatio * thumbWidth);
            
            Image thumb = image.GetThumbnailImage(
                thumbWidth, thumbHeight,
                () => false,
                IntPtr.Zero
            );
                      
            if (WebPageSnapshot.IsBlank((Bitmap)thumb))
            {
                using (Graphics g = Graphics.FromImage(thumb))
                {
                    StringFormat format = new StringFormat();                    
                    format.Alignment = StringAlignment.Center;
                    format.LineAlignment = StringAlignment.Center;
                    g.DrawString(
                        "IMAGE NOT AVAILABLE", 
                        new Font("Tahoma", 65), 
                        Brushes.DarkGray,
                        new RectangleF(0, 0, thumbWidth, thumbHeight), 
                        format
                        );             
                }
            }

            uxThumbnail.BackgroundImage = thumb;           
                                   
            EnableButtons(true);
        }
                
        private void EnableButtons(bool enabled)
        {
            uxSaveAs.Enabled = enabled;
        }

        private void uxCancel_Click(object sender, EventArgs e)
        {
            _wps.CancelAsync();
        }               
    }
}

WebPageSnapshot 是一個以 WebBrowse 類別為對象的自訂外覆類別（Wrapper Class）。透過非同步呼叫 GenerateAsync 方法，會將網頁載入到內部隱含的 WebBrowser 實例中。當 WebBrowser 完整載入網頁後，便會呼叫其 DrawToBitmap 方法建立網頁快照的點陣圖，然後引發 ImageCompleted 事件傳回快照圖。在上例中，將會由 RefreshImage 程序來處理 ImageCompleted 事件，並藉由傳入的 Image 物件的 GetThumbnailImage 方法建立縮圖影像。

不過，在測試過程中發現偶會有擷取到空白影像的情況。為了能處理此例外狀況，我從這裡找來了辨識空白圖片的程式演算法，並引用到 WebPageSnapshot 類別的 IsBlank 靜態方法。在範例中，我就對空白截圖繪製了 "IMAGE NOT AVAILABLE" 的字樣。