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

 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
  }
});

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

pupeeteer,Raspberry Pi

Posted by sirius