PhantomJSメモ2

PhantomJS

Rendering/rasterizationのメモ

colorwheel.js

HTML5 canvasを使ってカラーホイールを作成しPNGで保存

// 空ページ作成
var page = require('webpage').create();
// サイズを400x400に変更
page.viewportSize = { width: 400, height : 400 };
// canvasを持つhtmlの作成
page.content = '<html><body><canvas id="surface"></canvas></body></html>';
// カラーホイールを作成するjavascriptを記述
page.evaluate(function() {
    (...)
}


rasterize.js

ウェブページのキャプチャーをPDFで保存する。すごく便利

使い方：

phantomjs rasterize.js http://phantomjs.org/ home.pdf

他にもサイズ、書式、ズームが指定できる


WebPageモジュール

  • paperSize
    PDFで出力するときのページサイズを指定する。フォーマットは以下のような形
{ width: '200px', height: '300px', border: '0px' }
{ format: 'A4', orientation: 'portrait', border: '1cm' }

// デフォルトは1（100%）
page.zoomFactor = 0.25; // 25%
page.render('capture.png');


statusがsuccessかどうかで読み込めたかを判断できる

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    }
    (...)
}


render_multi_url.js

複数のページをPNG形式でキャプチャー

使い方：

phantomjs render_multi_url.js www.google.com www.bbc.co.uk www.phantomjs.org


WebPageモジュール

  • settings
    ウェブページのさまざまな設定。この設定はWebPage#openのときに適用される。WebPage#open後の変更は適用されない

    • javascriptEnabled
      ページ内のjavascriptを実行するかどうか。デフォルトはtrue
    • loadImages
      画像を読み込むかどうか。デフォルトはtrue
    • localToRemoteUrlAccessEnabled
      ローカルリソースからリモートURLにアクセスできるかどうか。デフォルトはfalse
    • userAgent
      サーバに送信するユーザーエージェント。ユーザーエージェント一覧
    • userName
      HTTP認証で用いる名前
    • password
      HTTP認証で用いるパスワード
    • XSSAuditingEnabled
      XSSフィルターを有効にするかどうか。デフォルトはfalse
    • webSecurityEnabled
      web securityを可能にすべきかどうか。デフォルトはtrue


URL毎にcallbackPerUrl()、すべてが終わったらcallbackFinal()を呼び出すようにしている

RenderUrlsToFile = function(urls, callbackPerUrl, callbackFinal) {
    (...)
};
(...)
RenderUrlsToFile(arrayOfUrls, (function(status, url, file) {
    if (status !== "success") {
        return console.log("Unable to render '" + url + "'");
    } else {
        return console.log("Rendered '" + url + "' at '" + file + "'");
    }
}), function() {
    return phantom.exit();
});


technews.js

Google NewsをPNG形式でキャプチャー

(...)
page.evaluate(function () {
    var body = document.body;
    
    // 背景色を変更
    body.style.backgroundColor = '#fff';
    
    // div#title-block要素を表示しない
    body.querySelector('div#title-block').style.display = 'none';
    
    // form#edition-picker-formの親の親の要素を表示しない
    body.querySelector('form#edition-picker-form').parentElement.parentElement.style.display = 'none';
});
(...)