使用PhantomJS进行网页截屏实战

最近有个需求需要用到网页截屏，看了一个大佬写的关于使用 JavaScript实现网页截屏的方法总结，最终决定尝试使用 PhantomJS 实现网页截屏。

PhantomJS 有中文文档，如果你对 nodejs 有了解的话，学习 PhantomJS 对你来说就是零门槛。

首先打开 PhantomJS 网站 http://wenku.kuryun.com/docs/phantomjs/index.html，下载压缩包。

由于 Linux 压缩包是 tar.bz2 结尾的，所以需要解压命令：

tar -jxvf xxxx.tar.bz2

打开压缩包下的 bin 文件夹，看到 phantomjs 可执行文件，在该目录下打开终端，直接执行 phantomjs 命令即可进入命令行环境，不过最好还是将这个目录加入环境变量：

echo "export PHANTOMJS=`pwd`" >> ~/.bash_profile
echo "export PATH=$PATH:$PHANTOMJS" >> ~/.bash_profile

然后，随便找个目录，新建 screenshot.js 文件，编辑代码：

// 读取命令行参数
var system = require('system');
var url = 'https://github.com';
var out = 'screenshot.jpg'
// 要截屏的网页
if (system.args.length > 1) {
  url = system.args[1]
  console.log("url: " + url)
}
// 导出的图片文件名
if (system.args.length > 2) {
  out = system.args[2]
  console.log("out: " + out)
}
// 开始截屏
var page = require('webpage').create();
// 设置浏览器的宽高
page.viewportSize = {
  width: 375,
  height: 667
};
// 设置要截屏的范围
page.clipRect = {
  top: 0,
  left: 0,
  width: 375,
  height: 667
};
// 设置userAgent
page.settings.userAgent = 'iPhone';
// 打开网页
page.open(url, function (status) {
  console.log("Status: " + status);
  // 最好用 setInterval 不断轮询网页是否渲染完成，或者用 setTimeout 延时截屏也凑合
  setInterval(function () {
    // 判断是否加载完，这里你自己具体分析
    var loading = page.evaluate(function () {
      return document.querySelectorAll('.loading').length === 0;
    });
    if (loading) {
      page.render(out, {
        format: 'jpeg', // 也可以 png
        quality: '100' // 清晰度 100最大
      });
      phantom.exit(); // 退出程序
    }
  }, 10);
});

执行这个文件进行截屏：

phantomjs screenshot.js

查看截图 screenshot.jpg 即可。