Chrome
async
await
headless-chrome

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

More than 1 year has passed since last update.

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 とかを対象ページにすると、横幅が想定以上に短くなってしまいます。

out_doc_await.png

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