使用phantomjs對頁面進行截圖
阿新 • • 發佈:2019-01-22
phantomjs是一個無介面瀏覽器,可用於網頁截圖和前端自動化測試,基於webkit核心(也就是chrome使用的核心),並使用js編寫業務指令碼來請求、瀏覽和操作頁面。
1、安裝phantomjs
下載phantomjs(官網下載),選擇自己需要的版本下載即可,我這裡是在windows下使用的,下載後直接解壓,為了方便我將包含phantomjs.exe的目標路徑新增到了環境變數裡面,後續使用比較方便。
安裝完成後在cmd裡面輸入phantomjs --version即可檢視phantomjs版本資訊。
2、phantomjs使用
phantomjs有標準的入門文件可以參考,網上也有很多的資料可以查閱,在使用過程中根據自己的需要實際操作。
我們這裡主要是對文章開頭提到到第一篇文章的仿照實現,所以理論和相關的注意事項可以參考文章引用的第一篇文章。
操作介面中的DOM樹主要使用使用
evaluate(function, arg1, arg2, ...) {object}
在截圖中如何將整個介面截圖,有如下幾種方法:
一個是使瀏覽器足夠大,這樣底部就顯示了,可以設定viewPortSize很大:page.viewportSize = {width: 4800,height: 8000};另一個是通過BOM方法操作滾動條,可以把滾動條滾動到一個很大的值,如:window.scrollTo(0,10000);也可以滾動到適應的高度:window.document.body.scrollTop = document.body.scrollHeight;
如何延遲截圖,頁面請求的資源,如圖片、非同步cgi、js等,返回的時間以及執行的長短都是不確定的,如果截圖過早,可能很多空白區域,因此需要定時截圖,在開啟頁面後,使用setTimeout來延遲截圖
window.setTimeout(function () {
page.render("test.png");
phantom.exit();
}, 1000);
完整的程式碼,請求搜狗搜尋微信的公眾賬號資訊,並對連線標記紅框、延遲截圖
var page = require('webpage').create(); system = require('system'); //var url = 'http://yule.club.sohu.com/gifttrade/thread/2m2efbrpfui'; var address; if(system.args.length == 1){ phantom.exit(); }else{ adress = system.args[1]; page.open(adress, function (status){ if (status != "success"){ console.log('FAIL to load the address'); phantom.exit(); } page.evaluate(function(){ //此函式在目標頁面執行的,上下文環境非本phantomjs,所以不能用到這個js中其他變數 window.scrollTo(0,10000);//滾動到底部 //window.document.body.scrollTop = document.body.scrollHeight; window.setTimeout(function(){ var plist = document.querySelectorAll("a"); var len = plist.length; while(len) { len--; var el = plist[len]; el.style.border = "1px solid red"; } },5000); }); window.setTimeout(function (){ //在本地生成截圖 page.render("json2form.png"); console.log(page.content); phantom.exit(); }, 5000+500); }); }
這裡附上java操作phantomjs的程式碼:
package com.newsTest.weixin;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
/**
* 類名: DownLoad
* 包名: com.newsTest.weixin
* 作者: zhouyh
* 時間: 2014-9-10 下午04:19:46
* 描述: TODO(這裡用一句話描述這個類的作用)
*/
public class DynamicDownLoad {
/**
*
* 方法名:getSrcContent
* 作者:zhouyh
* 建立時間:2014-9-10 下午06:57:32
* 描述:根據傳入的url,呼叫phantomjs進行下載,並返回原始碼資訊
* @param url
* @return
*/
public static String getSrcContent(String url){
//windows下phantomjs位置
String path = "D:/phantomjs-1.9.7-windows/";
Runtime rt = Runtime.getRuntime();
Process process = null;
try {
process = rt.exec(path + "phantomjs.exe D:/phantomjs-1.9.7-windows/test.js " + url.trim());
} catch (IOException e) {
// TODO 這裡寫異常處理的程式碼
e.printStackTrace();
}
InputStream is = process.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is));
StringBuffer sbf = new StringBuffer();
String tmp = "";
try {
while((tmp = br.readLine())!=null){
sbf.append(tmp);
}
} catch (IOException e) {
// TODO 這裡寫異常處理的程式碼
e.printStackTrace();
}
return sbf.toString();
}
/**
* 方法名:main
* 作者:zhouyh
* 建立時間:2014-9-10 下午04:19:46
* 描述:TODO(這裡用一句話描述這個方法的作用)
* @param args
* @throws IOException
*/
public static void main(String[] args){
// TODO Auto-generated method stub
String src = DynamicDownLoad.getSrcContent("http://weixin.sogou.com/gzh?openid=oIWsFt9MmzCvfJgaVxEUevPcuUCg");
System.out.println(src);
}
}
在使用中還有很多需要學習的地方,希望下次有機會可以深入的學習下phantomjs,附上截圖照片