Chrome截图(包括截取整张网页)的正确姿势 – 不安装任何扩展,只用原生截图

2019年5月9日 2 2,626 1375字阅读4分35秒

今天,大鸟看到网易相册关闭的新闻,有一则公告,大鸟是想完整截图的,找来找去,没发现什么特别好用的工具,最好搜索的时候才发现Chrome 在59版本的时候就已经原生支持截图功能了。Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

实在是孤陋寡闻,既然Chrome已经可以原生截图了,那么大鸟这篇文章就来介绍一下如何不安装如何扩展用Chrome风骚的截取网页图片:整张网页截图、可选区域截图、节点截图、capture screenshot屏幕区域截图。

Chrome原生截图,有两种方法,大鸟这里就分别来介绍下,还有一种奇葩的方法最后再说。

STEP 1 Resonsive

1.1进入 Device Toolbar

在你要截屏的网站上右键→检查进入Chrome DevTools(浏览器工具栏),大鸟觉得右键选择检查是最方便的进入方式,你也可以按F12、CTRL+SHIFT+I都可以愉快的进入Chrome DevTools。

单击toggle device toolbar就是有手机和平板的图标,进入 Device Toolbar。

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

1.2选择分辨率

在最上面选中模拟的设备分辨率,比如我选了iPad Pro,如图:

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

1.3 Capture full size screenshot

单击最右侧的三个点,选择 Capture full size screenshot,丢一张图看看:

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

选择Capture full size screenshot之后,Chrome会自动截取整张网页图片,并自动下载保存,如图:

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

STEP 2 Ctrl + Shift + P

上面这个方法,不够风骚啊,这个方法有一个缺点,必须要模拟一款移动设备才能截图。其实有一个更简单优雅的办法。也是大鸟推荐的方法,依然是F12 或 Ctrl + Shift + I 或者右键检查来打开开发者工具。

在打开Device Toolbar状态下按Ctrl + Shift + P 打开选择工具的窗口,如图:

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

在弹出的输入框里输入capture即可看到截图的选项(其实不需要输入完整,输入CAP就可以自动补全),然后选择自己需要的截图方式,按回车即可截图。

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

我们看到4个紫色的截图功能选项,大鸟这里选择capture full size screenshot(截取整张网页),如图:

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

我们看到chrome自动截取了整张网页,并且自动下载到了本地电脑。

大鸟这里在演示capture area screenshot区域截图:

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

选择capture area screenshot之后回车就可以用鼠标来选择区域了。其他的两个截图方式自己去尝试吧,用法就是这样了。

STEP 三 虚拟打印来截图

chrome有打印功能,可以打印到虚拟打印机,就能得到整个页面,无论多长都可以保存到,不过默认保存是pdf文件。

点击右上角三个圆点,之后找到打印,不过直接CTRL+P也可以调出来打印功能。

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

选择默认的保存方式为PDF,我们看图:

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

设置好,选择为保存即可把整张网页保存为pdf格式的文件,如图:

Chrome截图(包括截取整张网页)的正确姿势 - 不安装任何扩展,只用原生截图

保存的时候回询问你保存在哪里的,不用担心找不到。这样我们就保存了网页为pdf格式了,这样的格式可能会有人需要的,而且保存的格式完好,颜值颇高。

STEP 四 总结

因为是免插件原生来截图,目前大鸟也是整理了这么三个方法,如果有更好的方法,不妨留言交流,或者加微信交流,前提是免插件,为什么说免插件截图会稍微好点,因为是渲染引擎直接输出,要比普通扩展速度更快,分辨率也更高。

用插件截图大鸟会重新发一篇文章来罗列出来。

  • 我的微信
  • 分享宝塔面板建站技术交流等!
  • weinxin
  • 微信公众号
  • 关注本博公众号
  • weinxin
  • 版权声明: 发表于 2019年5月9日
  • 转载注明:https://www.daniao.org/5046.html

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0
    • avatar 奶爸de笔记 回复 6

      方法我了解了,不过我还想选择截图软件。