自動化截web頁面的圖
一、工具介紹：
PhantomJS是一個基於webkit的JavaScript API。它使用QtWebKit作為它核心瀏覽器的功能，使用webkit來編譯解釋執行JavaScript代碼。任何你可以在基於webkit瀏覽器做的事情，它都能做到。它不僅是個隱形的瀏覽器，提供了諸如CSS選擇器、支持Web標准、DOM操作、JSON、HTML5、Canvas、SVG等，同時也提供了處理文件I/O的操作，從而使你可以向操作系統讀寫文件等。PhantomJS的用處可謂非常廣泛，諸如網絡監測、網頁截屏、無需瀏覽器的 Web 測試、頁面訪問自動化等。
一句話，使用該工具可以在后台截web界面的圖。
二、下載安裝
下載路徑
wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
ubuntu安裝
sudo apt-get install fontconfig
三、案例
我有的博客首頁添加了一個世界各國用戶訪問的小工具，想着記錄每天數據的變化，又不想手動操作，因此想到了它！
創建一個js文件，vim a.js，內容如下：
var page = require('webpage').create();
system = require('system');
//要打印的url地址
var address = system.args[1];
//存儲文件路徑和名稱
var outputPng = './image.png';
//設置長寬
page.viewportSize = { width: 1280, height: 800 };
page.open(address, function(status) {
if(status !== 'success') {
console.log('Unable to load the address!');
phantom.exit();
} else {
//截圖的偏移和寬高 看下面的圖 會是以出截圖位置以及各參數位置
page.clipRect = {
top: 186,
left: 101,
width: 855,
height: 207
};
//此文本可以通過phantomjs指令輸出到文件
console.log("獲得的分類統計數據已保存至文件！");
console.log("截圖中......");
page.render(outputPng);
console.log("截圖已保存對應路徑！");
phantom.exit();
}
});
執行：
./phantomjs a.js https:/url/zqj-blog/
【注意】
若執行報錯
:~/bi/phantomjs/phantomjs-2.1.1-linux-x86_64$ ./bin/phantomjs examples/hello.js ./bin/phantomjs: error while loading shared libraries: libfontconfig.so.1: cannot open shared object file: No such file or directory
請執行
sudo apt-get install libfontconfig
js文件中，page.clipRect里的四個參數指的內容看下圖：
使用以下參數：
得到的截圖是：
這個命令會在后台自動加載頁面的js，在內存中顯示出圖像，並截圖！