给网站提供网页截图功能

在做一个网站项目的时候，要用到网页快照这个功能。客户的服务器是windows系统，不好实现这个功能，网上提供的各种调用接口又不太稳定，于是就想自己捣鼓这个玩意。

从网上找了篇教程开始实验，为了防止遗忘，做一步记一步，便成此文。

1、先安装git

yum install git

2、cd /

3、git clone git://github.com/n1k0/casperjs.git

4、cd casperjs

5、ln -sf /casperjs/bin/casperjs /usr/local/bin/casperjs ?//可以忽略 实际执行中php是执行 /casperjs/bin/casperjs

按照网上的教程，输入：casperjs –version 会显示版本。

结果我这里显示：Fatal: [Errno 2] No such file or directory; did you install phantomjs? 原来是需要装phantomjs。

/*****以下失败*****/

6、安装phantomjs，下载地址：http://phantomjs.org/download.html，{2.0.0下载}下载完毕后，unzip?phantomjs-X…，然后cd phantomjs目录。

cd 要解压的目录

wget -c?https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.0.0-source.zip

upzip -X?phantomjs-2.0.0-source.zip

mv phantomjs-2.0.0 phantomjs {换个简单的目录名}

cd phantomjs

7、./build.sh ?｛编译phantomjs｝

8、编译的时候，结果报错，从里面看到错误提示：ICU disabled.

9、yum install libicu-dev ｛安装ICU｝重新./build.sh

10、晕，还不行。弄另外一条途径

/*****以上失败*****/

6、cd /

7、sudo yum install gcc gcc-c++ make git openssl-devel freetype-devel fontconfig-devel

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

9、cd phantomjs

10、git checkout 1.9

提示：Branch 1.9 set up to track remote branch 1.9 from origin.
Switched to a new branch ‘1.9’

11、./build.sh ｛这次编译了好长时间，应该可以了。｝

12、cd bin {里面有个绿色的phantomjs，这就是成功编译了}

13、ln?-sf /phantomjs/bin/phantomjs /usr/local/bin/phantomjs ｛软连接过去，注意换成自己的目录｝

14、phantomjs –version ｛如果显示版本号就OK了。｝

15、casperjs –version ）｛如果显示版本号就OK了。如果不能，试试再执行ln -sf /casperjs/bin/casperjs /usr/local/bin/casperjs ｝

16、mkdir /usr/share/fonts/win ｛安装字体了｝

17、cd /usr/share/fonts/win ｛先进入这个目录，然后下载安装字体｝

18、为了方便大家，我把微软雅黑字体、vista雅黑、vista雅黑bold粗体打包放在本站，提供给大家下载。微软雅黑字体下载地址

｛如果还出现乱码，需要安装更多的字体 相应命令：yum install bitmap-fonts bitmap-fonts-cjk 不过我测试后发现抓取的字体大小不一，很难看，最终用yum install “@Chinese support”解决｝

19、sudo chmod 644 /usr/share/fonts/win/*.ttf {开启字体使用权限}

20、mkfontscale ｛建立字体缓存｝

21、mkfontdir? ｛建立字体缓存｝

22、fc-cache -fv ｛建立字体缓存｝

23、source /etc/profile ｛更新配置文件｝

注：20-23可以使用一条语句执行 ? mkfontscale && mkfontdir && fc-cache -fv && source /etc/profile

如果截屏字体还是方块，只能终极大法：yum install “@Chinese support” ，会安装gnome桌面，字体就正常了。卸载gnome命令是：yum groupremove “GNOME Desktop Environment”

24、准备开干：关于casperjs命令行传参给js脚本的资料请参考http://docs.casperjs.org/en/latest/cli.html#using-the-command-line

24、casperjs没有搞定，先弄了phantomjs。

25、在 /phantomjs/bin/下建立一个snap.js文件（文件名自拟）

26、snap.js代码｛wordpress没有缩进，凑合看吧。｝

[code lang=”js”]

var page = require(‘webpage’).create();
var args = require(‘system’).args;

var pageW = 1024;
var pageH = 768;

page.viewportSize = {
width: pageW,
height: pageH
};

var url = args[1];
var filename = args[2];
page.open(url, function (status) {
if (status !== ‘success’) {
console.log(‘Unable to load ‘ + url + ‘ !’);
phantom.exit();
} else {
window.setTimeout(function () {
page.clipRect = { left: 0, top: 0, width: pageW, height: pageH };
page.render(filename);
console.log(‘finish:’, filename);
phantom.exit();
}, 1000);
}
});

[/code]

27、在网站目录下执行 phantomjs /phantomjs/bin/snap.js http://要截取的网址 文件名.png ｛用浏览器查看图片是否正常｝
28、得偿所愿phantomjs搞好了，只是casperjs还没有弄好，继续努力。
29、重启了一下机器，发现phantomjs无法工作了，在phantomjs/bin/ 目录下执行 ./phantomjs可以运行，看来是PATH没有定义。
30、vi /etc/profile 在最末尾加上PATH=/usr/local/bin/phantomjs/bin:$PATH。保存后执行：source /etc/profile
31、随便找个目录进去，然后执行一下phantomjs –version ｛如果显示版本号就OK了。｝

——–PHP站点还不能做，casperjs也还不能执行——–

次日：发现是搬瓦工vps的机器不支持，换了一台vps就可以了。

参考文档：

http://www.thinkphp.cn/topic/12911.html

http://www.centoscn.com/image-text/config/2014/0427/2877.html