日本語フォントがインストールされていない環境で PhantomJS / Poltergeist のスクリーンショットを撮影すると、日本語部分が空白になったり、文字化けしたり、いろいろと辛いです。

せっかくなので Google の Noto フォントを利用して綺麗なスクリーンショットを撮影する方法を説明します。

環境

確認には次の環境を利用しています。

環境: CentOS7 （CentOS6でも同様の手順でいけると思います）
- Minimal ISO をインストールした環境
PhantomJS 2.1.1 （1.9.8 でも同様の手順でいけると思います）

インストール方法

https://www.google.com/get/noto/ から Noto Sans CJK JP をダウンロード Google Not Fonts へアクセスしダウンロードします。次のコマンドを実行することでもダウンロードすることができます。

  $ wget -S -O "NotoSansCJKjp-hinted.zip" "https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip"

ダウンロードしたファイルを /usr/share/fonts/noto/ へ展開

  $ sudo mkdir /usr/share/fonts/noto
  $ mkdir $$ && cd $$
  $ unzip NotoSansCJKjp-hinted.zip
  $ sudo cp -p *.otf /usr/share/fonts/noto/
  $ sudo chmod 644 /usr/share/fonts/noto/*.otf
  $ sudo chown root:root /usr/share/fonts/noto/*.otf

フォントキャッシュ更新

  $ sudo fc-cache -fv

確認

次のようなファイルを作成

test.js

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

page.open('https://www.google.co.jp/intl/ja/about/', function() {
  window.setTimeout(function() {
    page.render('test.png');
    phantom.exit();
  }, 200);
});

このテストスクリプトは CentOSからPhantomJSを実行すると画面キャプチャの日本語が表示されなくなる問題を、改変なく利用しています。

次のコマンドを実行してスクリーンショットを撮影。

$ phantomjs test.js

Before 日本語フォントがない場合	After 日本語フォントがある場合

補足

rspec で次のようにすると任意のスクリーンショットを取れるでしょう。

page.save_screenshot('screenshot.png', full: true)

参考