html2canvas是一个实现网页截图的库，允许你直接在用户浏览器上获取网页的截图或部分内容。屏幕截图是基于DOM的，因为它不做实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图，因此它可能不是100%准确的。即，它只能正确地描述它所理解的属性，这意味着有许多CSS属性不起作用，比如动画。

 

　　如官网所说的，它的使用非常之简单。

 

　　实际上只要一行代码就能拿到转换好的canvas数据，。

 

　　我的示例代码

 

　　效果如下图所示：

 

　　但实际上我在这里踩了大坑，我需要渲染的东西和公式有关，使用了渲染公式，其底层实现是svg，这导致我的公式无法被转换成canvas。（当然也有可能是其他原因导致的，欢迎指点）对此，就只好上绝招了，使用puppeteer。

 

　　之前有篇文章就写过使用这个node库将网页渲染成PDF并保存到本地，详见文章。渲染成PDF只是这个库的一个小功能，比如还可以用它截图。

 

　　是实例中的一个方法，主要有以下配置项。可以全屏截图，也可以提供坐标和长宽对指定区域截图。

 

　　使用上倒是其次，安装puppeteer库倒是更麻烦点，因为这个需要下载一个完整的chrome应用，如果因为网络原因下载不了。可以在package.json中只安装其核心即。在使用的时候自行配置本地的下载好chrome程序。这里不展开讲，可以搜索得到相关解决方案。以对知乎官网全屏截图为例。

 

　　声明实例就配置了相对路径的本地应用，。有些单页面应用或许还要配置等待所有请求加载完毕，即。

 

　　截图效果如下：

 

　　而如果要对指定区域截图，就要知道截图区域的坐标和长宽。一般来说，需要截图的部分都会有一个完整的DOM元素来渲染，如果不是，那就把它写在一个DOM元素内。

 

　　而对于如何获取一个DOM元素在页面上的位置，需要用到这几个DOM中的属性，   。如果布局上有特殊的情况，那坐标的获取可能还需要特殊处理。

 

　　坐标拿到了，截图也跑通了。但似乎还有另一个问题：坐标只是存在于页面上，而需要坐标的是node端。如何构建其node和页面的桥梁将坐标传递给node。这就要用到page实例中的方法，该方法可以传递两个参数：和。前者是要在当前页面实例执行的方法，后者是要传递给当前方法的参数。用在这里就是，页面上将获取好的元素坐标信息放到window对象中，那在中return 对象上的相关信息就好了。有时还需要将相关数据传递到页面供其使用，这个时候就是用第二个参数。代码如下：

 

　　拿到坐标后就可以依次截图了，截图可以保存为本地文件，也可以拿到该图片的buffer。