手机网页抓取视频(利用Playwright提供的强大API，轻松实现网页生成预览图)

　　手机网页抓取视频(利用Playwright提供的强大API，轻松实现网页生成预览图)

　　前言

　　如何生成网页的预览图像？

　　要实现这个功能，可以使用WebBrowser组件模拟浏览器，或者使用系统浏览器访问网页，然后进行截图。

　　但是，这需要编写大量的控制代码。

　　要想做好工作，必须先利好工具！

　　使用 Playwright 提供的强大 API，您可以轻松生成网页的预览图像。

　　截屏

　　实现起来很简单，直接上代码：

　　static async Task Main(string[] args)<br />{<br /> var playwright = await Playwright.CreateAsync();<br /> await using var browser = await playwright.Chromium.LaunchAsync();<br /> var page = await browser.NewPageAsync();<br /> 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");<br /> await page.ScreenshotAsync(new PageScreenshotOptions { <br /> Path = "screenshot.png", <br /> FullPage = true});<br />}

　　访问网页，将增长图截图，保存到指定路径。

　　有关 API 的详细说明，请参阅：#page-screenshot

　　追踪

　　该功能可以记录Playwright执行的所有操作并进行截图，对于获取demo素材非常有用。

　　以下示例代码记录了打开必应主页并进行搜索操作的全过程：

　　static async Task Main(string[] args)<br />{<br /> var playwright = await Playwright.CreateAsync();<br /> var browser = await playwright.Chromium.LaunchAsync();<br /> var context = await browser.NewContextAsync();<br /> await context.Tracing.StartAsync(new TracingStartOptions() { Screenshots =true , Snapshots =true });<br /> var page = await context.NewPageAsync();<br /> await page.GotoAsync("https://cn.bing.com/");<br /><br /> // 输入搜索关键字<br /> await page.TypeAsync("input[name='q']", "intext:\"请关注我的个人公众号”My IO“\"");<br /><br /> var page1 = await page.RunAndWaitForNavigationAsync(async () =><br /> {<br /> // 点击搜索<br /> await page.ClickAsync("#search_icon");<br /> });<br /><br /> await context.Tracing.StopAsync(new TracingStopOptions() { Path = "trace.zip" });<br />}

　　可以使用 Playwright 自带的查看工具查看整个流程：

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

　　您还可以解压缩 trace.zip 以获取所有屏幕截图：

　　综上所述

　　有了Playwright，你再也不用害怕页面加载后要求截取页面长成图片的功能了。