使用PhantomJS實作網頁截圖功能

簡介

PhantomJS(http://phantomjs.org/)是一個讓使用者可以使用javascript 控制WebKit排版引擎(主要設計是用來讓網頁瀏覽器繪製網頁)的API套件。筆者使用過後讚嘆不已，只能說：簡單！強大！好用！

安裝方式

其實不需要安裝啦！去官網下載後，直接解壓縮放到某一個目錄即可，若是windows會在解壓縮目錄下找到phantomjs.exe，直接在command line執行寫好的PhantomJS javascript即可(如hello.js)。

phantom hello.js

撰寫網頁截圖script

其實PhantomJS已經有附一個簡易的網頁截圖sample code，放在PhantomJS目錄下的examples/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"');

    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' };

    }

    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();

        } else {

            window.setTimeout(function () {

                page.render(output);

                phantom.exit();

            }, 200);

        }

    });

}

rasterize.js支援4個參數，依序介紹如下：

1. (必填)要被截圖的網址，如：http://www.google.com.tw
2. (必填)截圖完成時儲存的檔案名稱，如：c:\pageCapture.png
3. (選填)若截圖為pdf時(用截圖檔案結尾為"pdf"做判斷)，pdf的紙張大小
4. (選填)若截圖為pdf時(用截圖檔案結尾為"pdf"做判斷)，pdf的zoom size

執行結果

但這個範例的最大問題在於截圖的大小固定為600*600 px，所以在實用上需要再做一點修改，以下為將rasterize.js改為可以接收以px為單位的截圖大小：

var page = require('webpage').create(),

    system = require('system'),

    address, output, size;

if (system.args.length < 3 || system.args.length > 5) {

    console.log('Usage: screenshot.js URL filename [imagewidth*imageheight|paperwidth*paperheight|paperformat] [zoom]');

    console.log('  image (png output) examples: "1024*768"');

    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');

    phantom.exit(1);

} else {

    address = system.args[1];

    output = system.args[2];

    var clipRect = null;

   

    page.viewportSize = { width: 600, height: 600 };

    if (system.args.length > 3) {

        size = system.args[3].split('*');

        console.log('size[0] = ' + size[0] + ', size[1] = ' + size[1]);

       

        if (system.args[2].substr(-4) === ".pdf") {

            page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }

                                               : { format: system.args[3], orientation: 'portrait', margin: '1cm' };

        } else {

            clipRect = {top: 0, left:0, width: size[0], height: size[1]};

        }

    }

    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();

        } else {

            window.setTimeout(function () {

               

                try {

                    if (clipRect) {

                        page.clipRect = clipRect;

                        console.log('Capturing page to ' + output + ' with clipRect' + JSON.stringify(clipRect));

                    } else {

                        console.log('Capturing page to ' + output);

                    }

                    page.render(output);

                } catch (e) {

                    console.log('Failed to capture screenshot as ' + output + ': ' + e, "error");

                }

               

                console.log('Capture screenshot success!');

                phantom.exit();

            }, 200);

        }

    });

}

使用Java呼叫PhantomJS

在java程式內，可以使用Runtime物件的exec()方法產生image。

String execCommand = "C:/phantomjs-1.9.7/phantomjs.exe C:/phantomjs-1.9.7/myJs/screenshot.js http://www.google.com.tw c:/pageCapture.png 1024*768";

Process process = Runtime.getRuntime().exec(execCommand);

process.waitFor();