[譯]使用PhantomJS進行網頁剪報

原文:http://ariya.ofilabs.com/2013/04/web-page-clipping-with-phantomjs.html

---

PhantomJS的一個主要用途就是用來抓取網頁並將它渲染成圖片.在渲染圖片時有很多選項可供調整,其中最常用的一個就是縮放選項(調整zoomFactor屬性的值),它經常會被用在制作縮略圖的場景下.另外一個不怎么被人熟知的選項就是"按指定矩形區域渲染"選項(調整clipRect屬性的值),也就是生成的圖片只包含了目標網頁中被指定的那部分區域.

這種只渲染頁面指定矩形區域的需求通常表現為你只想獲取頁面中某個特定元素的內容(就像getBoundingClientRect的作用一樣).這種截圖需求可以很方便的使用CasperJS提供的captureSelector函數來實現.

另外一種情況就是你想將一個比較長的頁面分割成兩張圖片分別渲染,經常是在查看移動網站的時候,下面的圖片演示了渲染BBC網站時圖片的分割效果.

用來生成這兩張圖片的腳本就在下面.

var page = require('webpage').create();
page.settings.userAgent = 'WebKit/534.46 Mobile/9A405 Safari/7534.48.3';
page.settings.viewportSize = { width: 400, height: 600 };
page.open('http://m.bbc.co.uk/news/business', function (status) {
    if (status !== 'success') {
        console.log('Unable to load BBC!');
        phantom.exit();
    } else {
        window.setTimeout(function () {
            page.clipRect = { left: 0, top: 0, width: 400, height: 600 };
            page.render('bbc-page1.png');
            page.clipRect = { left: 0, top: 600, width: 400, height: 600 };
            page.render('bbc-page2.png');
            phantom.exit();
        }, 2000);
    }
});

代碼非常簡單,尤其是如果你已經熟悉了PhantomJS的這幾個截屏用例的情況下.改變UA字符串是為了確保抓取到的頁面是移動版頁面.生成的兩張圖片,分別對應了用戶將要看到的第一屏頁面和第二屏頁面.這都是通過調整所要截取矩形區域的top偏移量來控制的,非常方便!