puppeteer でフルページの画像を取得する

2021年6月24日

　puppeteer でページのスクリーンショットを撮る際に、fullPage オプションを true にすると、ページ全体のスクリーンショットが撮れるはずですが、Raspberry Pi ではビューポートに設定した範囲しか描画されません。

　ちょっと工夫をしてページ全体のスクリーンショットを撮ることができました。手順は次の通りです。

• ビューポートの設定で高さを大きな値にする。
• スクリーンショットのオプションで body サイズにクリップする。

ビューポートのサイズを設定する

　まず、ビューポートの幅を決めます。この幅は、スクリーンショットを撮るときの幅と同じにするので、定数にします。ついでに高さも定数にします。高さは、ページの高さよりも十分大きなサイズにします。

const viewWidth = 1024;
const viewHeight = 99999;

　この定数を使い、ビューポートの設定をします。

await page.setViewport({
  width: viewWidth,
  height: viewHeight
});

　後は、ページを読み込めばいいです。

スクリーンショットを撮る

　このままスクリーンショットを撮るとビューポートのサイズになってしまうので、オプションでクリップします。クリップする際、高さを body の高さにします。ただし、きっちりのサイズだと、最下端がギリギリなので、余裕を持たせるため、高さを 32 pixel 増やしています。

await page.screenshot({
  path: "screenshot.png",
  clip: {
    x: 0,
    y: 0,
    width: viewWidth,
    height: await page.evaluate(() => document.body.clientHeight) + 32
  }
});

　これでページ全体のスクリーンショットが撮れました。