PhantomCSSを使ってページ内の特定のDOM要素のみを画像として保存する
仕事でちょっとした便利ツールを作る機会があったので、ページ内の特定のDOM要素のみを画像として保存する方法を調べました。
PhantomJSやCasperJSは多少使ったことがあったので、PhantomCSSというのを使ってみることにしました。
これはおそらく画面のテストに使うもので、2つの画像の差分も取れるようなのですが、その一部の機能を使うことで目的を達成することができました。
導入
前提条件
PhantomJSとCasperJSが必要です。
これらのインストール方法は割愛します。
インストール
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
保存した画像はこのようになっています(実際は記事すべてが入っているのでもっと縦長です)
まとめ
他にも方法があるかもしれないけど、意外と簡単にできてよかった。