読者です 読者をやめる 読者になる 読者になる

PhantomJSでURLリストから自動キャプチャ・切り抜き・縮小するスクリプト

GitHub JavaScript

f:id:syonx:20160221132924p:plain

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ライブラリではありません。JavaScriptAPIです。 PhantomJSは WindowsMacLinux で利用できます。インストールも簡単ですよ。

撮影サイズの調整

Viewportのサイズ指定がコード内に記述されています。必要に応じて変更してください。

index.js

const vp_w = 980;
const vp_h = 768;

なお、上記サイズは Viewport(表示領域)に対するものであり、出力PNG画像のサイズ指定ではありません。

キャプチャした画像の切り抜きと縮小

キャプチャしたPNG画像をサムネイルのように使いたいことがあるかと思います。 その場合は PhantomJS 側で調整するのではなく、単純に画像処理として行うと良いでしょう。 ここでは、コマンドラインで画像処理ができる ImageMagick でのサンプルを紹介します。

www.imagemagick.org

切り抜き (上書き)

$ 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