给网站提供网页截图功能

    |     2015年9月30日   |   学习偶记   |     评论已关闭   |    2381

在做一个网站项目的时候,要用到网页快照这个功能。客户的服务器是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没有缩进,凑合看吧。}

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);
}
});

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

 

 

 

上一篇:

下一篇:

噢!评论已关闭。