PhantomJS ダウンロード & キャプチャ編

そういえば書くの忘れてた。PhantomJS を始める & キャプチャするときのメモ。

ダウンロード

PhantomJSのdownloadページ から、それぞれの環境に合ったzipファイルをダウンロードし、適当な場所へ解凍します。

私はWindowsを使ってるので、最新バージョンのphantomjs-1.9.0-windows.zipをダウンロードしました。解凍場所は C:\phantomjs-1.9.0-windowsにしました。

ファイル構成はこんなカンジでした

C:

|-- phantomjs-1.9.0-windows

    |-- phantomjs.exe

    |-- ChangeLog

    |-- LICENSE.BSD

    |-- README.md

    |-- third-party.txt

    |-- examples

        |-- xxx.js

        |-- xxx.coffee

        |--

                  :

今回はこのexampleフォルダにある rasterize.js をCUIで実行して、任意のブラウザ画面をキャプチャしてみます。

実行する前に、Pathを通してphantomjsコマンドが使えるようにします。 

コントロールパネル→システム→システムの詳細設定→環境変数で、pantomjs.exeのパスを追加してください。

私の場合はC直下に配置したので、C:\phantomjs-1.9.0-windows; と追加しました。

これで準備完了。

キャプチャしてみよう

では任意のブラウザ画面をキャプチャしてみます。今回は私のblogの「PantomJS 日本語訳」記事のページをキャプチャしてみることにします。

コマンド プロンプトを立ち上げC:\phantomjs-1.9.0-windowsに移動し、以下のコマンドを入力します。

phantomjs examples/rasterize.js http://equal-001.hatenablog.com/ test.png

すると、test.pngという画像データが生成されます。

こんなカンジ

URLで指定したページのキャプチャができました。

ちなみに、pngの他にもjpgやpdf形式も出力できます。

以下のようにjsプログラムをつくって実行しても同じことができます。

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

page.open('http://equal-001.hatenablog.com/entry/2013/04/11/202052', function () {

    page.render('test.png');

    phantom.exit();

});

function部分にいろいろ処理を追加すれば特定の場所にある画像だけを保存したり、保存する画像サイズを指定したりとかできると思います。（今回はやらない）

思ったほど画質は綺麗じゃなかったけど、js使ってる動的なページもキャプチャできるのは嬉しい。

あとCUIから操作できるのはライトで良い。動きもそこそこ軽いし、結構楽しめるんじゃないかな。