最近想做一个海报，为了更加方便快速实现我的需求，我让 AI 直接帮我用 html 做了一下排版。排版倒是做好了，但是我需要的是一张图片，现在就需要将 html 页面转换成一张图片，且最好不能失真。
一般的做法是直接用微信截图工具直接截图，但是，现在这个页面比较长，微信截图工具目前还不支持滚动截图，因此，这个方案就不采纳。
还有一种方案就是自己用 python 写一段代码进行转换一下。这种方案对于批量操作还比较适合。或者就是可以找一个浏览器插件来解决这个问题。但是，现在我只需要临时处理一下，我就不想折腾了。
那么，有没有可能浏览器会自带这个功能呢？
于是，我赶紧搜了一下，发现还真有！
要是真没有的话，估计我还是得老老实实的找插件或者写代码了。
我发现有两种非常实用的长截图的方式：
完整页面长截图
这种方式就会将整个页面全部截图成图片。
- 我们先打开浏览器的调试台界面。
打开方式可以通过依次点击 Chrome 浏览器右上角的那三个竖点 -> 更多工具 -> 开发者工具 进行打开。
你也可以通过快捷键的方式打开：
- Windows 用户：直接按一下
F12键即可 - Mac 用户：
⌘Command + ⌥Option + I
- 通过自带工具截图
随后，我们通过快捷键：
- Windows 用户：
Ctrl + Shift + P - Mac 用户：
⌘Command + ⇧Shift + P
然后直接输入命令 full 通过上下键选中 Capture full size screenshot 然后直接敲回车，Chrome 就会自动将整个网页内容保存到本地。
部分网页节点截图
有时候，我们并不需要将整个网页截图下来，很有可能，我们只需要截取网页中的某一个 div 中的内容就可以了。那么，怎么操作呢？
同样，我们还是先打开浏览器的调试台，然后，我们再点击这里的嗅探元素按钮，去选择想要的部分。
打开嗅探元素也可以通过快捷键：
- Windows 用户：
Ctrl + Shift + C - Mac 用户：
⌘Command + ⇧Shift + C
当你点击了嗅探元素按钮之后，你将鼠标移动到页面上，你会发现页面会有选中的效果，并且当你将控制台上切换到 Elements 时，也会有对应的元素被选中。
比如，在这里我选中了 class 为 header 的 div
当你选中了元素之后，随后，我们通过快捷键：
- Windows 用户：
Ctrl + Shift + P - Mac 用户：
⌘Command + ⇧Shift + P
然后我们输入 node 然后去选中 Capture node screenshot 直接敲回车，这样，一张完美的选区截图就产生了。
选区截图如下所示：
这种方式完全是由渲染引擎直接输出，比普通扩展速度更快，分辨率也更高。还是相当不错的。
怎么样？是不是又 get 到了一个新技能？