7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-09-02

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

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

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?