网页截图的两种实现方案:html2canvas & puppeteer

  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。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61781.shtml

张贴在2