C#实现网页加载后将页面截取成长图片 | Playwright版

前言

如何将网页生成预览图?

要实现这个功能,可以用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});
}

访问网页,截取成长图,并保存到指定路径。

f954500d23429d6d9b6a864e78ebae45.png

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

bb79ce8bf4c0913b7a8a0ed8157eeec0.png

也可以解压trace.zip,拿到所有的截屏图片:

531ec48190a4f218d06b8f4d5483b298.png

结论

有了Playwright,再也不怕要求实现网页加载后将页面截取成长图片功能了。

如果你觉得这篇文章对你有所启发,请关注我的个人公众号”My IO“

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/292568.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python链接mysql报错2003_Python连接Mysql报错问题解决

import MySQLdb #打开数据库 db MySQLdb.connect("127.0.0.1","root","123456","testdb",3306) #使用corsor()方法获取操作游标 cursor db.cursor() #使用execute方法执行SQL语句 cursor.execute("SELECT VERSION()") #使…

nodejs项目_多人群聊实现其实很简单:Nodejs+WebSocket+Vue轻松实现Web IM

点击右上方红色按钮关注“web秀”,让你真正秀起来前言在《Nodejs WebSocket简单介绍及示例 - 第一章》中简单的介绍了,Nodejs WebSocket的使用方法及作用,今天就用它来搭建一个简单的聊天室功能。1、NodejsWebSocket创建后台服务器功能 2、…

交友软件上的两种网友类型......

1 轻轻松松月入五千的方法(素材来源网络,侵删)▼2 像极了期末复习的你(via.段子楼,侵删)▼3 听说你想要中国的熊猫▼4 听说学校附近有野人出没(素材来源网络,侵删)▼5…

解读最新的 Xamarin 更新

微软中国MSDN 点击上方蓝字关注我们Good news——Visual Studio 2022 包括了 Xamarin 对 Android 12和苹果最新的 Xcode 13 版本下的 iOS、iPadOS、macOS 和 tvOS 的支持,以及适用于支持它们的最新 Xamarin.Forms 版本。让我们一起来了解下最新 Xamarin版本&#x…

原来医生的处方不是随便乱写的...

1 奇奇怪怪的知识又增加了(素材来源网络,侵删)▼2 像极了早上刚睡醒炸毛的你▼3 原来医生的处方不是瞎写的▼4 当爷爷不当孙子(素材来源网络,侵删)▼5 40厘米的身高差(素材来源网络&#xf…

Android之解决Gigaset手机不能设置DeviceOwner权限提示already provisioned问题

客户那里有Gigaset手机,安装我们的产品需要注入DeviceOwner,但是刚恢复默认出厂的Gigaset手机很奇葩,注入权限的提示下面错误,导致不能使用我们的产品 设置DeviceOwner权限是有限制的,需要手机账号(acount)为0 1 我们用命令查看手机的帐号 adb shell dumpsys account …

收集网络状态(Ping),并用邮件通知管理员

在没有第三方工具对网络进行监控的话,要检查网络中某台主机,或是某个IP地址通讯是否正常,我们通常用手动PING来进行测试。有了PowerShell,我们可以用他定时Ping网络上的几个IP地址,然后把ping的个延时时间用邮件通知给…

sql 某列数据全部为0则不显示该列_数据产品经理养成记(五):汇总分析

学会了如何查找数据后,接下来就要对数据进行分析处理,比如求和、平均值、加总等等。这些对数据的加工处理通过汇总函数来实现。汇总函数在之前的两篇文章中都有涉及,这里采用概念--案例--总结的方式,集中介绍一下。1.什么是汇总函…

vim学习日志(5):vim下wimrc的配置,解决中文乱码问题

解决linux下vim乱码的情况:(修改vimrc的内容) 全局的情况下:即所有用户都能用这个配置 文件地址:/etc/vimrc 在文件中添加: set fileencodingsutf-8,ucs-bom,gb18030,gbk,gb2312,cp936 set termencodingutf-8 set enco…

Android插件化开发之AMS与应用程序(客户端ActivityThread、Instrumentation、Activity)通信模型分析

转载来自:http://blog.csdn.net/qinjuning/article/details/7262769 今天主要分析下ActivityManagerService(服务端) 与应用程序(客户端)之间的通信模型,在介绍这个通信模型的基础上,再 简单介绍实现这个模型所需要数据类型。 本文所介绍内容…

iOS开发UI篇—直接使用UITableView Controller

iOS开发UI篇—直接使用UITableView Controller 一、一般过程 1 //2 // YYViewController.h3 // UITableView Controller4 //5 // Created by 孔医己 on 14-6-2.6 // Copyright (c) 2014年 itcast. All rights reserved.7 //8 9 #import <UIKit/UIKit.h> 10 11 inter…

怎么做图片文字二维码一起_怎么做?才能让文字编排更出彩

在之前视觉设计文章中&#xff0c;我把视觉设计大致罗列了四个方向&#xff0c;更多的是希望能够为大家带来一些努力方向&#xff0c;在设计的路上不那么困惑迷茫&#xff0c;视觉设计本身涵盖的范围就比较广&#xff0c;同时也没有什么衡量的标准和具体的特征&#xff0c;只有…

.NET6之MiniAPI(八):日志

说明&#xff1a;本篇简单说一下日志中常用的几个点&#xff0c;关于日志&#xff0c;后面重点会说到三方日志提供程序在MiniAPI中&#xff0c;可以通过方法或构造函数中&#xff0c;获取框架自动注入的日志类型&#xff0c;如下方式&#xff1a;app.MapGet("/test",…

为什么你闻不到自己胳肢窝的味道?

▲ 点击查看生活中&#xff0c;我们常常会选择性地忽略一些事。吃螺蛳粉的人不会觉得屋子臭&#xff0c;而别人身上有一点烟味就可以闻到。公司的厕所&#xff0c;别人用完后&#xff0c;总觉得比自己用完时更臭。夏天胳肢窝出汗的味道&#xff0c;自己从来都闻不到&#xff0c…

Android插件化开发之Hook StartActivity方法

第一步、先爆项目demo照片&#xff0c;代码不多&#xff0c;不要怕 第二步、应该知道Java反射相关知识 如果不知道或者忘记的小伙伴请猛搓这里&#xff0c;Android插件化开发基础之Java反射机制研究 http://blog.csdn.net/u011068702/article/details/49863931第三步、应该知道…

ArcGis融合小多边形到相邻多边形

&#xfeff;&#xfeff;在有的时候&#xff0c;我们的数据中可能会有许多细小的图斑&#xff0c;这些并不是我们想要的&#xff0c;需要将它们合并到周围的图斑中&#xff0c;如果一个一个手动合并&#xff0c;那工作量之大简直不敢想象。现在借助ArcGIS的Eliminate工具可以很…

oracle 48小时内_近了近了,内马尔正大步向巴萨走来,西媒称有望48小时内敲定转会...

“即将完成&#xff01;”8月28日的西班牙《每日体育报》给巴萨球迷送上了好消息&#xff0c;称在巴萨高层与大巴黎高层进行最新一轮谈判后&#xff0c;内马尔已经非常接近巴萨了。按照《每日体育报》的说法&#xff0c;巴萨和大巴黎有望在未来24到48小时内就内马尔的转会达成协…

《随机过程》布朗运动理论中的两个反常问题

全世界只有3.14 % 的人关注了爆炸吧知识1827 年&#xff0c;英国植物学家布朗&#xff08;Brown&#xff09;用显微镜观察悬浮在液体中的花粉微粒时&#xff0c;发现花粉微粒总是在做无规则运动。后来人们发现&#xff0c;这是一种广泛存在于自然界、工程技术和社会经济等领域中…

linux之用2张图片描述vim常见命令

对了&#xff0c;使得光标跳转到最后一行是这个命令 G