前言

如何將網頁生成預覽圖？

要實現這個功能，可以用WebBrowser組件模擬瀏覽器，或者使用系統瀏覽器訪問網頁，再進行截圖操作。

但是，這樣需要編寫大量的控制代碼。

工欲善其事，必先利其器！

利用Playwright提供的強大API，可以輕松實現將網頁生成預覽圖。

Screenshot

實現起來非常簡單，直接上代碼：

static?async?Task?Main(string[]?args) {var?playwright?=?await?Playwright.CreateAsync();await?using?var?browser?=?await?playwright.Chromium.LaunchAsync();var?page?=?await?browser.NewPageAsync();await?page.GotoAsync("https://cn.bing.com/search?q=intext%3A%22%E8%AF%B7%E5%85%B3%E6%B3%A8%E6%88%91%E7%9A%84%E4%B8%AA%E4%BA%BA%E5%85%AC%E4%BC%97%E5%8F%B7%E2%80%9DMy+IO%E2%80%9C%22");await?page.ScreenshotAsync(new?PageScreenshotOptions?{?Path?=?"screenshot.png",?FullPage?=?true}); }

訪問網頁，截取成長圖，并保存到指定路徑。

API詳細說明，請參看：https://playwright.dev/dotnet/docs/api/class-page#page-screenshot

Tracing

這個功能可以記錄Playwright執行的所有操作流程并截圖，對于獲取演示素材非常有用。

下面的示例代碼，記錄了打開bing首頁，并且執行搜索操作的全過程：

static?async?Task?Main(string[]?args) {var?playwright?=?await?Playwright.CreateAsync();var?browser?=?await?playwright.Chromium.LaunchAsync();var?context?=?await?browser.NewContextAsync();await?context.Tracing.StartAsync(new?TracingStartOptions()?{?Screenshots?=true?,?Snapshots?=true??});var?page?=?await?context.NewPageAsync();await?page.GotoAsync("https://cn.bing.com/");//?輸入搜索關鍵字await?page.TypeAsync("input[name='q']",?"intext:\"請關注我的個人公眾號”My?IO“\"");var?page1?=?await?page.RunAndWaitForNavigationAsync(async?()?=>{//?點擊搜索await?page.ClickAsync("#search_icon");});await?context.Tracing.StopAsync(new?TracingStopOptions()?{?Path?=?"trace.zip"?}); }

可以使用Playwright自帶的view工具查看整個流程：

playwright?show-trace?bin\Debug\net5.0\trace.zip

也可以解壓trace.zip，拿到所有的截屏圖片：

結論

有了Playwright，再也不怕要求實現網頁加載后將頁面截取成長圖片功能了。

如果你覺得這篇文章對你有所啟發，請關注我的個人公眾號”My IO“

總結

以上是生活随笔為你收集整理的C#实现网页加载后将页面截取成长图片 | Playwright版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。