使用 C# 產生網頁縮圖

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

範例程式碼
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" 的字樣。
no image

Download source code

參考資料:
Algorithm to Detect Blank Images by Chinh Do
Event-based Asynchronous Pattern Overview by Microsoft


Share/Save/Bookmark

0 comments :: 使用 C# 產生網頁縮圖

張貼留言