【2015-11-05】 一个网页截图的功能尝试

[toxic-johann]

这几天想尝试一下制作截图功能，在尝试中摸索到了一个比较好用的服务端截图工具——phantomjs。

首先介绍一下phantomjs。phantomjs原理上是一个无头浏览器。就是一个不带界面的浏览器。基于此原因，phantomjs打开网页的速度会快点，而且phantomjs十分多的js API，包括dom元件控制、css、json、canvas、SVG等等。鉴于此，我们可以用phantomjs实现众多自己想要的截图。包括对页面上的某个部分进行截图。也正是基于这个原因，我们可以爬取其他网络，测试自己的网站等等。

本次的网页截图我只实现了全网截图，可以考虑以后开取图象爬取功能，如google的banner爬取等等。

安装phantomjs方法有很多，主站上有介绍。 例如在windows下就直接下载一个zip包加个环境变量就可以了，十分方便。不过对于linux方面反而没有辣么友好。ORZ。我这次安装的环境是ubuntu14.04。也是相当折腾了一番。

当然你可以尝试一下

apt-get install phantomjs

这样做还是比较方便的，不过有一个缺点，版本比较老旧。是1.9.0.

因此我采取了自己编译，首先确保一下依赖的安装。

sudo apt-get install build-essential g++ flex bison gperf ruby perl \
  libsqlite3-dev libfontconfig1-dev libicu-dev libfreetype6 libssl-dev \
  libpng-dev libjpeg-dev python libx11-dev libxext-dev

然后在官网下载好源码包。 或者在git上直接拉取。

git clone git://github.com/ariya/phantomjs.git

然后直接进入phantomjs运行编译脚本，这里貌似要接一下checkout。不然装下来的会是1.9.0.编译的时间比较长，有接近一个小时。如果是官网拉取得话就不用git checkout了。

cd phantomjs
git checkout 2.0
./build.sh

但是这样子编译完还是不能直接调用的，如果你只是采用cmd，那么就直接注册一个环境变量就好了。但是假如你和我一样要利用phantomjs-node进行调用，需要将bin中的文件移动到你的/usr/bin中，这样才可以进行调用。

cp ./bin/phantomjs /usr/bin

然后我是用node进行调用，所以我利用了phantomjs-node插件。npm安装

npm install phantom

简单易用。

辣么调用就十分简单了。

let data={
    webUrl:'http://wwww.baidu.com',
    imageName:'test.png'
let phantom = require('phantom');
phantom.create(function (ph) {
        ph.createPage(function (page) {
            page.open(data.webUrl, function (status) {
            setTimeout(function(){
                page.render(imageName,function(error){
                  if(error){
                    console.log(error);
                  } else {
                  }
                });
                ph.exit();
            },1000);
            });
        });
    });

我的调用方法大概如上,有几个点要解释下。

• 打开的url必须是完整的url网址。
• 存储可以尝试png,jpg,pdf。gif尚未试验完整。
• 延迟1秒截图是因为纵然页面加载完毕，但是可能渲染还是不好的，所以需要进行延迟。

那么问题就产生了，这样子后台处理的时间较长，如何让前台拉取数据。方法有以下：

• 傻瓜版：前台利用setTimeout延迟拉取数据。
• 实用版：websocket

thinkjs中的websocket已经包装好，十分好用。欢迎大家尝试。反正我用了十分好玩。

现在这个服务我已经开始提供了，大家可以点击这里进行试用。当然还有很多可以改进的地方。