PhantomJSでURLリストから自動キャプチャ・切り抜き・縮小するスクリプト
google http://www.google.co.jp/ yahoo http://www.yahoo.co.jp/ github https://github.com/
こんな感じでTSVファイルを記述して実行すると、上の画像のようにPNG画像が出力されます。 1列目がPNGファイル名、2列目がURLです。TSVにしたのは、Excelからコピペできるからですね。
ソースコード
使い方
Node.js 上で動作します。PhantomJSをインストールしてから↓
$ git clone https://github.com/syon/utils.git
$ cd utils/phantomjs-capture/
$ npm install
$ node index
『PhantomJS』とは？
ひとことで言うと「画面を持たないWebブラウザ」です。それゆえのファントムなのでしょう。 後ろに"JS"と付きますが、JavaScriptライブラリではありません。JavaScriptのAPIです。 PhantomJSは Windows・Mac・Linux で利用できます。インストールも簡単ですよ。
撮影サイズの調整
Viewportのサイズ指定がコード内に記述されています。必要に応じて変更してください。
index.js
const vp_w = 980; const vp_h = 768;
なお、上記サイズは Viewport（表示領域）に対するものであり、出力PNG画像のサイズ指定ではありません。
キャプチャした画像の切り抜きと縮小
キャプチャしたPNG画像をサムネイルのように使いたいことがあるかと思います。 その場合は PhantomJS 側で調整するのではなく、単純に画像処理として行うと良いでしょう。 ここでは、コマンドラインで画像処理ができる ImageMagick でのサンプルを紹介します。
切り抜き (上書き)
$ mogrify -crop 980x768+0+0 results/*.png
縮小 (上書き)
$ mogrify -resize 320x -unsharp 2x1.4+0.5+0 results/*.png
ご参考
本スクリプトの作成にあたって、こちらの記事を大いに参考にさせていただきました。
改変ポイントとしては、キャプチャ対象をローカルHTMLからURLにしたこと、それと PhantomJS v2 への対応です。 PhantomJS v1 では CSS のフレックスボックスのレンダリングにバグがあったためです。
Enjoy !
過去にこんな記事書いたの忘れてました。 syonx.hatenablog.com
