PhantomJS网页截图

做数据展示时，网页上已经画出了各种直观漂亮的图形。

但是给boss们发送邮件时需要清晰的数据图片。用js画不太方便，可选择截图。

 

1.安装PhantomJS， 可以在网上搜索按照过程。

2.编写snap.js脚本

3.在php脚本中调用 

phantomjs  snap.js  url  img_path  top  left   width  height

例如： 

phantomjs snap.js https://www.baidu.com/ wiki.png 0 0 1000 500

截取https://www.baidu.com/中左上角坐标（0,0）长1000，高500像素的矩形区域，图片保存在wiki.png

 

4.可以将图片保存在webserver目录中，供http请求。

注意：：：如果截图出现中文乱码，是因为字库没有安装

在centos中执行：yum install bitmap-fonts bitmap-fonts-cjk

在ubuntu中执行：sudo apt-get install xfonts-wqy

 

或者在网上下载后，安装。

如下是snap.js代码

var page = require('webpage').create(); 
var args = require('system').args; 
 
var url = args[1]; 
var filename = args[2]; 
var cliptop = args[3];
var clipleft = args[4];
var clipwidth = args[5];
var clipheight = args[6];

// letf : 0,
// width : 1000,
// height : 410
page.viewportSize = { width: 1000, height: 480 };
page.clipRect = {
    top : cliptop,
    left : clipleft,
    width : clipwidth,
    height : clipheight
};


page.open(url, function () {
    window.setTimeout(function () {
        page.render(filename);
        phantom.exit();
     }, 15000);
});