不装插件不写代码！教你一招搞定网页长截图！清晰且高效！

最近想做一个海报，为了更加方便快速实现我的需求，我让 AI 直接帮我用 html 做了一下排版。排版倒是做好了，但是我需要的是一张图片，现在就需要将 html 页面转换成一张图片，且最好不能失真。

一般的做法是直接用微信截图工具直接截图，但是，现在这个页面比较长，微信截图工具目前还不支持滚动截图，因此，这个方案就不采纳。

还有一种方案就是自己用 python 写一段代码进行转换一下。这种方案对于批量操作还比较适合。或者就是可以找一个浏览器插件来解决这个问题。但是，现在我只需要临时处理一下，我就不想折腾了。

那么，有没有可能浏览器会自带这个功能呢？

于是，我赶紧搜了一下，发现还真有！

要是真没有的话，估计我还是得老老实实的找插件或者写代码了。

我发现有两种非常实用的长截图的方式：

完整页面长截图

这种方式就会将整个页面全部截图成图片。

打开浏览器调试台界面

打开方式可以通过依次点击 Chrome 浏览器右上角的那三个竖点 -> 更多工具 -> 开发者工具 进行打开。

你也可以通过快捷键的方式打开：

手动打开调试台界面

随后，我们通过快捷键：

然后直接输入命令 full 通过上下键选中 Capture full size screenshot 然后直接敲回车，Chrome 就会自动将整个网页内容保存到本地。

浏览器自带的截图工具

有时候，我们并不需要将整个网页截图下来，很有可能，我们只需要截取网页中的某一个 div 中的内容就可以了。那么，怎么操作呢？

同样，我们还是先打开浏览器的调试台，然后，我们再点击这里的嗅探元素按钮，去选择想要的部分。

打开嗅探元素

打开嗅探元素也可以通过快捷键：

当你点击了嗅探元素按钮之后，你将鼠标移动到页面上，你会发现页面会有选中的效果，并且当你将控制台上切换到 Elements 时，也会有对应的元素被选中。

比如，在这里我选中了 class 为 header 的 div

选中元素

当你选中了元素之后，随后，我们通过快捷键：

然后我们输入 node 然后去选中 Capture node screenshot 直接敲回车，这样，一张完美的选区截图就产生了。

部分截图

选区截图如下所示：

选区截图

这种方式完全是由渲染引擎直接输出，比普通扩展速度更快，分辨率也更高。还是相当不错的。

怎么样？是不是又 get 到了一个新技能？