linux访问网页_优雅的实现网页截图之PhantomJS

前言

PhantomJS是使用JavaScript编写的无头WebKit。虽然目前Github 上PhantomJS的开发已经停止，但是其许多功能特性仍然值得探究，现在最新稳定版本是2.1.1。相比Chrome Headless，PhantomJS非常易于安装，只需下载并解压缩，即可进行使用。

功能

• 无头Web测试。无需安装浏览器即可进行闪电般的快速测试！
• 页面自动化。使用标准DOM API或jQuery之类的常用库访问和操作网页。
• 屏幕截图。可以编程方式捕获Web内容，包括CSS，SVG和Canvas。构建服务器端Web图形应用程序，从屏幕截图服务到矢量图表光栅化器。
• 网络监控。自动化性能分析，跟踪页面加载和导出为标准HAR格式

安装

访问https://phantomjs.org/download.html 下载系统对应版本的文件。例如64位Linux，下载phantomjs-2.1.1-linux-x86_64.tar.bz2并解压缩内容。

[root@hostname ~]# tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
 
[root@hostname ~]# ./phantomjs-2.1.1-linux-x86_64/bin/phantomjs  --version
2.1.1

注意：对于此静态构建，二进制文件是独立的。不需要安装Qt，WebKit或任何其他库。但是，它仍然依赖Fontconfig(软件包fontconfig或libfontconfig，取决于分布)。系统必须具有GLIBCXX_3.4.9和GLIBC_2.7。

看到版本号正常输出，说明安装成功，是不是特别简单。

截图

先测试一下Phantom JS截图功能，记得以前写过一篇文章，采用wkhtml2pdf进行截图，有兴趣的可以看看，但是那种方法有个缺点，就是无法支持单页面应用。随着现在前后端分离这个趋势的发展，越来越多的应用是单页面应用。此时用wkhtml2pdf就无能为力了，所以这边采用PhantomJS进行单页面应用截图。首先复制如下JS，并命名为rasterize.js ，执行命令

"use strict";
var page = require('webpage').create(),
    system = require('system'),
    address, output, size, pageWidth, pageHeight;

if (system.args.length  5) {
    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
    console.log('  image (png/jpg output) examples: "1920px" entire page, window width 1920px');
    console.log('                                   "800px*600px" window, clipped to 800x600');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
        size = system.args[3].split('*');
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
                                           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
    } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
        size = system.args[3].split('*');
        if (size.length === 2) {
            pageWidth = parseInt(size[0], 10);
            pageHeight = parseInt(size[1], 10);
            page.viewportSize = { width: pageWidth, height: pageHeight };
            page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
        } else {
            console.log("size:", system.args[3]);
            pageWidth = parseInt(system.args[3], 10);
            pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
            console.log ("pageHeight:",pageHeight);
            page.viewportSize = { width: pageWidth, height: pageHeight };
        }
    }
    if (system.args.length > 4) {
        page.zoomFactor = system.args[4];
    }
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
            phantom.exit(1);
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

[root@hostname ~]# ./phantomjs-2.1.1-linux-x86_64/bin/phantomjs --output-encoding=encoding   rasterize.js 'https://www.baidu.com' baidu.png

此时查看当前目录下生成了baidu.png。该命令也可生成pdf文件，把baidu.png改成baidu.pdf即可

备注1：如果服务器未安装字体，截图中中文会显示乱码，如下图所示：

解决方案：在服务器上安装字体，截图时即显示正常

在centos中执行：yum install bitmap-fonts bitmap-fonts-cjk
在ubuntu中执行：sudo apt-get install xfonts-wqy

备注二：执行 tar -jxfv 命令解压tar.bz2压缩包发现产生如下错误

[root@hostname ~]# tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
tar (child): bzip2: Cannot exec: No such file or directory
tar (child): Error is not recoverable: exiting now
tar: Child returned status 2
tar: Error is not recoverable: exiting now

解决方案：在服务器上安装bzip2和bzip2-libs，再重新执行解压命令即可

yum -y install bzip2 bzip2-libs

其他截图方式：

优雅的实现网页截图之Chrome方式介绍

优雅的实现网页截图之Wkhtmltopdf方式介绍