PhantomJS を利用する上では基礎中の基礎みたいな話なので簡潔に書く環境としては、CoffeeScript で書いて npm install した後に npm run start をするまぁ公式を見ればすぐにできることである

以下が、作成したもの

{
  "name": "screenshots"
  "version": "1.0.0",
  "description": "Renders the web page to an image buffer and saves it as the specified filename.",
  "scripts": {
    "start": "coffee -c index.coffee && node_modules/phantomjs/bin/phantomjs index.js",
  },
  "dependencies": {
    "phantomjs": "^2.1.3"
  },
  "engines": {
    "node": "5.5.0",
    "npm": "3.3.8"
  }
}

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

page.open 'http://www.yjfx.jp/', (status) ->
  console.log 'Status: ' + status
  if status == 'success'
    page.render 'yjfx.png'
  phantom.exit()
  return

生成物は省略かなり簡単に Web ページのスクリーンショットが生成できるもっと楽にスクリーンショットが欲しいのであれば Chrome 拡張機能を使えばいい

追記

このページをスクリーンショットする場合は page.viewportSize を設定すると大きいサイズで保存できます

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

page.open 'http://qiita.com/makietan/items/bce761dcc9ac468cf53a', (status) ->
  console.log 'Status: ' + status
  if status = 'success'
    page.viewportSize = { width: 1920, height: 1080 }
    page.render 'qiita.png'
  phantom.exit()
  return

結果画像

f:id:tanjoin:20160628175309p:plain

Qiita に書いた記事

PhantomJS で Web ページのスクリーンショットを保存する - Qiita