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")