Nightmareでスクリーンショットのサイズを変更してみる

ご無沙汰しています。ポリドッグです。ここ二ヶ月ぐらいずっとPHP(Symfony2)を触り続けていましたが、久しぶりにNodejs触ってて楽しいです Nightmare(v2)を使ってキャプチャをリサイズしたのでその話をしようと思います。

そもそもNigthmareとは？

いわゆるヘッドレスブラウザってやつですが、Electron使って動いているみたいですね！(v2からですが) これ系だと2年ぐらい前はCasperJSとかあったと思いますが、最近はもう皆さん使っていないんですかね？てかPhantomJSからElectronに移り変わっていくのかな？

普通にスクリーンショットを作成する

まずは、普通にスクリーンショットをとるスクリプト

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const Nightmare = require('nightmare');
const nightmare = Nightmare();

Promise.resolve(
  nightmare
    .goto("http://polidog.jp/")
    .screenshot("polidog.png")
).then(()=>{
  console.log("screenshot create.");
})
nightmare.end();

すごい簡単に書けちゃいますね。

サイズを変更してみる

最初はImageMagicとかその辺つかって処理しようかなぁーなんて思っていましたが、NightmareのREADME.mdあたりを読んでいたらどうやらできそうな雰囲気があったので、試してみました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


const Nightmare = require('nightmare');
const nightmare = Nightmare();

Promise.resolve(
  nightmare
    .goto("http://polidog.jp/")
    .screenshot("polidog.png",{
      x: 10,
      y: 50,
      width: 200,
      height: 200
    })
).then(()=>{
  console.log("screenshot create.");
})
nightmare.end();

コードを見ればわかると思いますが、すごく簡単です。 screenshotの引数に情報を追加するだけです。
x,y,width,heightのそれぞれの値を指定するだけで画像を切り出す事が出来ます。

参考

Nightmare Nightmare(v2) + mocha ベースに、ES6でE2Eテストを書く

そもそもNigthmareとは？

普通にスクリーンショットを作成する

サイズを変更してみる

参考

カテゴリ