puppeteer でviewportを指定するとスクリーンショットのfullPage: true が効かなくなる問題
これで解決!
await page.setViewport({ width: 320, height: await page.evaluate(() => document.body.clientHeight), });
なにが問題なのか
puppeteer でscreenshot をフルスクリーンで撮るにはscreenshot()
のオプションにfullPage: true
を指定します。
await page.screenshot({ path: `${outdir}/test.png`, fullPage: true });
これでばっちりだと思いきや、なぜかsetViewport
でwidth
やheight
を指定すると無効化されてしまいます???
await page.setViewport({ width: 320, height: 3000, });
ならばと、width
だけを指定してみたところ怒られます。。
await page.setViewport({ width: 320, // height: 3000, });
なんでや。。
Protocol error (Emulation.setDeviceMetricsOverride): Invalid parameters height: integer value expected
どうすればいいのかと悩んでいたところ、単純にコンテンツの高さを取得する方法で解決できました。
それが冒頭のコードです。
await page.setViewport({ width: 320, height: await page.evaluate(() => document.body.clientHeight), });
古典的な解決策ですね。
2017年の8月に起票されてるけどいまだにOpenのままです。
Chrome seems to have a hard limit when taking screenshots of tall pages · Issue #359 · GoogleChrome/puppeteer · GitHub
作って動かすALife ―実装を通した人工生命モデル理論入門
- 作者: 岡瑞起,池上高志,ドミニク・チェン,青木竜太,丸山典宏
- 出版社/メーカー: オライリージャパン
- 発売日: 2018/07/28
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る