PhantomCSSを使ってページ内の特定のDOM要素のみを画像として保存する

仕事でちょっとした便利ツールを作る機会があったので、ページ内の特定のDOM要素のみを画像として保存する方法を調べました。

PhantomJSやCasperJSは多少使ったことがあったので、PhantomCSSというのを使ってみることにしました。

github.com

これはおそらく画面のテストに使うもので、2つの画像の差分も取れるようなのですが、その一部の機能を使うことで目的を達成することができました。

å°Žå…¥

前提条件

PhantomJSとCasperJSが必要です。

PhantomJS | PhantomJS

casperjs.org

これらのインストール方法は割愛します。

インストール

npm でインストールできます。グローバルインストールするかどうかは環境やお好みに合わせて変えてください。

$ npm install -g phantomcss

使い方

このブログのトップページに表示されている、1件目の記事を画像として保存するサンプルコードはこちら。

casper.options.viewportSize = {
    width: 1280,
    height: 1024
};
var phantomcss = require('phantomcss')
phantomcss.init({screenshotRoot: './screenshots'})

casper.start('http://ariarijp.hatenablog.com/').then(function() {
    phantomcss.screenshot('#entry-10328749687202579336', 'article');
}).run();

動作確認

このスクリプトを以下のように実行します。

$ casperjs test sample.js

正常に実行できれば、以下のようなファイルが作成されているはずです。

screenshots/
`-- article_0.png

保存した画像はこのようになっています（実際は記事すべてが入っているのでもっと縦長です）

f:id:ariarijp:20170114214103p:plain

まとめ

他にも方法があるかもしれないけど、意外と簡単にできてよかった。