Chrome 已经原生支持截图功能，还可以给节点截图！

[islishude]

昨天Chrome62稳定版释出，除了常规修复各种安全问题外，还增加很多功能上的支持，比如说今天要介绍的强大的截图功能。

直接截图

打开开发者工具页面，选择左上角的元素选择按钮（Inspect）

Windows 下按住 Ctrl，Mac 就按住 Command，然后在页面拖动选择区域即可。

Chrome会自动使用下载方式进行存储，如下效果图，感觉还不错。

给节点截图

比如说我们刚才手动截取的区域其实是一个Node节点，如果想完整截取这一部分，我们就需要使用节点截图功能。

首先在开发者工具里面选择节点，这个如上图所示直接点选HTML即可。

然后按下快捷键 Ctrl + Shift + p 打开命令工具，Mac下就是 Cmd + Shift + p，输入 node 选择 Capture node screenshot 即可。图片会自动下载。

那么我们真的不需要网页截图插件了，如果想截图整个网页，我们直接在根节点选取就可以了。

是不是很方便？

原文首发在我的 GitHub 博客

[ChenHongLuan]

6666，很好很强大

[tonitrnel]

666666，学习了

[greatghoul]

才知道还能这样，学习了。

[BleemIs42]

发现节点截屏出来的图片颜色失真很厉害, 有解决办法么?

[greatghoul]

这个可能不好解决。

[BeliefRC]

有提供api，通过代码的方式截图吗？

[islishude]

move to https://islishude.github.io/blog/2019/01/30/tool/Chrome-%E5%B7%B2%E7%BB%8F%E5%8E%9F%E7%94%9F%E6%94%AF%E6%8C%81%E6%88%AA%E5%9B%BE%E5%8A%9F%E8%83%BD%EF%BC%8C%E8%BF%98%E5%8F%AF%E4%BB%A5%E7%BB%99%E8%8A%82%E7%82%B9%E6%88%AA%E5%9B%BE/

[Hugo-mcx]

同问，有提供api，通过代码的方式截图吗？最近很需要实现这个功能......