Phantomjs可以对网页进行截图，功能比较强大。这儿就说一个比较特殊的截图，要是需要截图的页面是需要登录后才加载的内容呢，请看后面的内容。
1.下载phantomjs
下载地址：官网是 http://phantomjs.org/ 下载后，将phamtomjs 放在windows或者linux上面，直接解压，然后进入phantomjs文件夹中的bin目录中。phantomjs\bin目录下面有个phantomjs.exe ，可以直接点击运行它执行JS，也可以将它加入到系统变量，使它可以全局执行，方便一些。
我的项目中是放在linux上的，同样的，将phantomjs下载后上传到linux服务器，也可以直接在Linux上面通过wget进行下载。
解压之后。进入phantomjs的bin目录下面，输入phantomjs -v ：
将phantomjs的bin目录下的phantomjs加入到系统变量，方便后续随时使用。
显示版本号，就可以开始进行截图工作了。
2.编写截图JS代码
cuptImage.js
// 实现BI截图的JS方法
// 调用phantomjs 方法
var page = require('webpage').create(),
system = require('system'),
address,output,size;
if (system.args.length < 3 || system.args.length > 5){
console.log('Usage:phantomjs.js URL filename');
phantom.exit(1);
}else{
address = system.args[1];
output = system.args[2];
size = parseInt(system.args[3]);
page.viewportSize = {width:1024,height:size};
page.open(address,function(status){
// 通过在页面上执行脚本获取页面的渲染高度
var bodys = page.evaluate(function(){
return document.getElementsByTagName('html')[0].getBoundingClientRect();
});
// 按照实际页面的高度，设定渲染的宽高
page.clipRect = {
top:bodys.top,
left:bodys.left,
width:bodys.width,
height:bodys.height
};
// 预留一定的渲染时间
window.setTimeout(function(){
page.render(output);
page.close();
console.log('Cupt Success!');
phantom.exit();
},5000);
});
}
3.单点登录的html页面
fibi.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://demo.finebi.com/WebReport/ReportServer?op=emb&resource=finereport.js"> </script>
<script type="text/javascript">
function cjkEncode(text) {
if (text == null) {
return "";
}
var newText = "";
for (var i = 0; i < text.length; i++) {
var code = text.charCodeAt (i);
if (code >= 128 || code == 91 || code == 93) {
newText += "[" + code.toString(16) + "]";
} else {
newText += text.charAt(i);
}
}
return newText;
}
function loginFR() {
var username ="demo";//cjkEncode(document.getElementById("username").value);
var password ="demo";//cjkEncode(document.getElementById("password").value);
jQuery.ajax({
url:"http://demo.finebi.com/WebReport/ReportServer?op=fs_load&cmd=sso",//单点登录的报表服务器
dataType:"jsonp",//跨域采用jsonp方式
data:{"fr_username":username,"fr_password":password},
jsonp:"callback",
timeout:10000,//超时时间（单位：毫秒）
success:function(data) {
if (data.status === "success") {
alert("success");
document.write("<iframe "+"src="+'"'+"http://demo.finebi.com/WebReport/ReportServer?op=fr_bi&cmd=bi_init&id=47&createBy=-999&hideTop=true"+'"'+" width="+"100%"+" height="+"100%"+"/>");
//setTimeout("alert(1)",1000);
document.write("<iframe "+"src="+'"'+"http://www.baidu.com/"+'"'+" width="+"100%"+" height="+"50%"+"/>");
//window.location.href="http://demo.finebi.com/WebReport/ReportServer?op=fr_bi&cmd=bi_init&id=47&createBy=-999&hideTop=true";
//登录成功
} else if (data.status === "fail"){
alert("用户名密码错误！！！"); //登录失败（用户名或密码错误）
}
},
error:function(){
alert("超时或服务器其他错误！！！");// 登录失败（超时或服务器其他错误）
}
});
}
</script>
<body onload="loginFR();">
</body>
</html> fibi.html主要实现的是自动登录。页面展示如下：
4.开始截图
截图的语法是 ：phantomjs 截图js文件的地址 要截图的url 生成的图片名.png 页面宽度
例如我项目中的: phantomjs cuptImage.js fibi.html success.png 1080
phantomjs cuptImage.js fibi.html fibi.png 1080
然后查看截图成功之后的图片：
结果如下：
宽度可以自己指定。大家可以参考一下，实际项目中，比如我在PHP调用Liunx执行phantomjs进行截图的时候，要注意一点，就是phantomjs一定要使用绝对路径来执行，不然会报错。另外一点就是单点登录的延迟问题，可以对cuptImage.js中的等待时间进行修改。
在PHP中执行：exec("/usr/cuptimage/phantomjs/bin/phantomjs $cuptimagejsurl $url $png $width")