JavaScript 实现网页截屏五种方法

JavaScript 实现网页截屏五种方法

最近研究了下如何利用JavaScript实现网页截屏，包括在浏览器运行的JS，以及在后台运行的nodeJs的方法。主要看了以下几个：

• PhantomJS
• Puppeteer(chrome headless)
• SlimerJS
• dom-to-image
• html2canvas

测试的网页使用了WebGL技术，所以下面的总结会和WebGL相关。

名词定义

headless browser

无界面浏览器，多用于网页自动化测试、网页截屏、网页的网络监控等。

PhantomJS

PhantomJS是可以通过JS进行编程的headless浏览器，使用的是QtWebKit内核。

实现截屏的代码，假设文件名为github.js：

// 创建一个网页实例
var page = require( webpage ).create();
// 加载页面
page.open( http://github.com/ , function () {
   
    // 给网页截屏，保存到github.png文件中
    page.render( github.png );
    phantom.exit();
})

运行：

phantomjs github.js

普通的页面没有问题，但是如果运行包含WebGL的页面，发现截屏不对。经过一些调查，发现不支持WebGL，github issue。

总结：

1、PhantomJs已经停止维护了，所以不太建议继续使用。停止维护的一个原因是chrome发布的headless版本对它造成了一定冲击。

2、不支持WebGL。但是，还是有开发者说可以自己给PhantomJS添加WebGL支持，不过，这个方案目前超出我的知识范围了，就没有继续研究。

Puppeteer(chrome headless)

Puppeteer是一个Node库，提供了控制chrome和chromium的API。默认运行headless模式，也支持界面运行。

实现截屏的代码example.js：

const puppeteer = require( puppeteer );

(async () => {
   
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await p