免插件和软件实现Chrome进行网页长截图

《免插件和软件实现Chrome进行网页长截图》

之前在截网页长截图的时候,一直找不到很好的方法,要么是下载软件,但是又不想去下载,要么是一段一段截下来,自己去PS拼,在百度上搜了一下,原来Chrome原生自带长截图的功能,这里做一个分享。

基础工作:Chrome升级至59或更高版本,然后按下F12(Windows) ⌘Command + ⌥Option + I(Mac)快捷键,打开调试界面。

《免插件和软件实现Chrome进行网页长截图》

2、按下Ctrl + Shift + P(Windows) ⌘Command + ⇧Shift + P(Mac),输入命令 Capture full size screenshot(只输入 full 就行了),按下回车,Chrome会自动截取整个网页并保存到本地,由于是渲染引擎直接输出,速度更快,分辨率更高。

《免插件和软件实现Chrome进行网页长截图》

输出长截图如下

但是有时候发现,截出来的图片是没有东西的,是透明的,比如我的网站直接用上面那个命令,截出来就是空白的,那么就需要用到下面的命令

如果想精准截取网页某一部分,可以按下Ctrl + Shift + C(Windows) ⌘Command + ⇧Shift + C(Mac),打开嗅探元素,选中你想要的部分后,再运行 Capture node screenshot命令,然后你会发现你选择的那块区域已经截取下来

《免插件和软件实现Chrome进行网页长截图》

效果如下:

《免插件和软件实现Chrome进行网页长截图》

另外,Capture screenshot 命令可以让你截取当前网页的可视部分。

对于想截取移动端的网页,也是有办法的,按下Ctrl + Shift + M(Windows) ⌘Command + ⇧Shift + M(Mac)快捷键,打开模拟移动设备,选择你的设备型号,再重复上面的命令即可。

《免插件和软件实现Chrome进行网页长截图》

效果:

《免插件和软件实现Chrome进行网页长截图》

需要说明的一点是,Chrome自带的截图,兼容性可能会有问题,特别是在有延迟加载的网页上,截出来的内容,要么是空白的,要么是花屏,在我的这个博客就遇到过上述两个现象,所以如果你是比较常使用长截图功能,还是推荐下载安装专业的软件或者插件。

点赞

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

18 + 5 =