chromy でフルサイズのスクリーンショットをとる。Headless Chrome

3689 ワード
headless-chrome await async Chrome Chrome テキストリンク

headless chrome でフルサイズ（縦に長いページ）のキャプチャをとりたかっただけなのですが。いろいろライブラリを試したのですが、うまくいかず。離れた島にいる @tkhr に聞いたら chromy がいいらしいよとのことで試してみたら、確かにとても簡単でした。よかったです。

yarn add chromy
sample.js
const Chromy = require('chromy')
const fs = require('fs')

async function main() {

  let chromy = new Chromy()

  try {
    await chromy.goto('http://todays-quiz.com')
    const png = await chromy.screenshotDocument()
    fs.writeFileSync('out.png', png)
    await chromy.close()
  } catch(e) {
    console.log(e);
    chromy.close()
  }

}

main()

$ node sample.js

上のコードは公式サンプルを async await で書いたものになります。
公式サンプルはこちら。

以上です。ありがとうございました。 🍊

追記: ちょっとわからないところ
http://google.com とかを対象ページにすると、横幅が想定以上に短くなってしまいます。

右側が切れているように見えます。この辺は調べてないので、まだわかっていません。 😮