html轉圖片網頁截屏（二）PhantomJS

關於PhantomJS

PhantomJS 是一個基於WebKit的服務器端 JavaScript API。它全面支持web而不需瀏覽器支持，其快速，原生支持各類Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。PhantomJS能夠用於頁面自動化，網絡監測，網頁截屏，以及無界面測試等。

咱們還能夠用它來作爬蟲哦，你們知道，網頁上有些數據是經過執行js渲染出來的，這樣的話爬蟲去抓取數據的時候就會很麻煩，PhantomJS自帶WebKit內核，咱們能夠利用PhantomJS解決爬蟲不能執行js的問題。

此次要說的是他的截圖功能

下面是官網提供的rasterize.js截圖示例：

var page = require('webpage').create(), system = require('system'), address, output, size; if (system.args.length < 3 || system.args.length > 5) { console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]'); console.log(' paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"'); console.log(' image (png/jpg output) examples: "1920px" entire page, window width 1920px'); console.log(' "800px*600px" window, clipped to 800x600'); phantom.exit(1); } else { address = system.args[1]; output = system.args[2]; page.viewportSize = { width: 600, height: 600 }; if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") { size = system.args[3].split('*'); page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' } : { format: system.args[3], orientation: 'portrait', margin: '1cm' }; } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") { size = system.args[3].split('*'); if (size.length === 2) { pageWidth = parseInt(size[0], 10); pageHeight = parseInt(size[1], 10); page.viewportSize = { width: pageWidth, height: pageHeight }; // 經過clipRect能夠指定渲染的區域： page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight }; } else { console.log("size:", system.args[3]); pageWidth = parseInt(system.args[3], 10); pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any console.log ("pageHeight:",pageHeight); page.viewportSize = { width: pageWidth, height: pageHeight }; } } if (system.args.length > 4) { page.zoomFactor = system.args[4]; } page.open(address, function (status) { if (status !== 'success') { console.log('Unable to load the address!'); phantom.exit(1); } else { window.setTimeout(function () { page.render(output); phantom.exit(); }, 200); } }); }

上面的代碼能夠進行截圖，不過問題就在於，頁面的高度須要咱們手動指定，那就不方便了。

在園子裏發現有個哥們經過手動設定高度的方法來解決這個問題：http://www.cnblogs.com/xiehuiqi220/p/3551699.html，不過頁面的高度沒有那麼高，渲染的圖片下面就會出現大塊的留白，也是不夠靈活。

想到PhantomJS自己也能夠執行js的，咱們能夠將頁面加載完畢後，獲取頁面的實際高度，而後從新設定截取的區域，不就能夠解決了。

因而便有了如下代碼：

// 經過在頁面上執行腳本獲取頁面的渲染高度 var bb = page.evaluate(function () { return document.getElementsByTagName('html')[0].getBoundingClientRect(); }); // 按照實際頁面的高度，設定渲染的寬高 page.clipRect = { top: bb.top, left: bb.left, width: bb.width, height: bb.height }; // 預留必定的渲染時間 window.setTimeout(function () { page.render(file); page.close(); console.log('render ok'); }, 1000);

改造後的代碼以下：

var page = require('webpage').create(), system = require('system'), address, output, size; if (system.args.length < 3 || system.args.length > 5) { console.log('Usage: rasterize.js URL filename'); phantom.exit(1); } else { address = system.args[1]; output = system.args[2]; page.viewportSize = { width: 1024, height: 600 }; page.open(address, function (status) { // 經過在頁面上執行腳本獲取頁面的渲染高度 var bb = page.evaluate(function () { return document.getElementsByTagName('html')[0].getBoundingClientRect(); }); // 按照實際頁面的高度，設定渲染的寬高 page.clipRect = { top: bb.top, left: bb.left, width: bb.width, height: bb.height }; // 預留必定的渲染時間 window.setTimeout(function () { page.render(output); page.close(); console.log('render ok'); }, 1000); }); }

經過執行D:\Software\phantomjs-1.9.7-windows>phantomjs.exe render.js http://cnblogs.com cnblogs.png就能夠把博客園首頁截取下來了。

效果以下：