在 .NET 平台上,我們有多種方式可以將一段 HTML 文本轉換為一張圖片:HTML Renderer、SelectPdf 、Aspose.Html 等。
在 WinForm 程序中,每一個 System.Windows.Forms.Control
的派生類型均包含一個名為 DrawToBitmap
的方法,該方法可以將控件繪制到一張圖片上。WebBrowser 具備顯示 HTML 的功能,又因為其從 Control 類型派生,所以包含 DrawToBitmap
方法。我們只需將要在 WebBrowser 上加載要展示的 HTML 並在其 DocumentCompleted
事件中繪制圖片即可:
public static async Task<Image> HtmlToImage(String html, int width = 1024, int height = 768) { var taskCompletionSource = new TaskCompletionSource<Image>(); var thread = new Thread(() => { using var browser = new WebBrowser { Width = width, Height = height, ScrollBarsEnabled = false }; browser.DocumentCompleted += (s, e) => { var b = s as WebBrowser; if (b == null) { return; } var bmp = new Bitmap(b.Width, b.Height); b.DrawToBitmap(bmp, new Rectangle(0, 0, b.Width, b.Height)); taskCompletionSource.SetResult(bmp); Application.ExitThread(); }; browser.DocumentText = html; Application.Run(); }); thread.SetApartmentState(ApartmentState.STA); thread.Start(); return await taskCompletionSource.Task; }
以上代碼參考了: Stack Overflow ,筆者將其改造為異步方法並增加了必要的釋放功能。在 LINQPad 中測試效果如下:
該方式的優點:
- 簡單易用。
- 支持最新的 .NET Core 環境。
- 無需引用第三方類庫,沒有版權和安全性風險,安全且免費。
- 支持從互聯網上加載內容。
該方式的缺點:
- 雖然支持 .NET Core ,但以上代碼不能跨平台使用。
- WebBrowser 控件基於 IE 瀏覽器並受宿主操作系統影響,要求被呈現的網頁具備較高的兼容性。
使用 IE8+ 版本進行渲染
筆者在實際工作中使用到了部分 CSS3 屬性,默認情況下 WebBrowser 使用低版本的 IE 瀏覽器渲染網頁,這會導致部分網頁效果不生效,比如隔行變色效果。除了修改注冊表,我們仍可以通過在網頁中加入 meta
標簽的方式告知 WebBrowser 使用高版本的 IE 瀏覽器進行渲染,僅需將以下代碼復制至 HTML 的 head 標簽內即可:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>