Large Puppeteer Images

big-screenshot.js

const puppeteer = require('puppeteer');
const merge = require('merge-img');

const pageUrl = ''; // REPLACE ME
const pageElement = '#svgcanvas'; // REPLACE ME

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(pageUrl);
  const $ele = await page.$(pageElement);
  const { width, height } = await $ele.boundingBox();
  
  // Split into two and re-merge downstream
  return Promise.all([
    page.screenshot({
      clip: {
        x: 0,
        y: 0,
        height,
        width: Math.floor(width / 2),
      },
    }),
    page.screenshot({
      clip: {
        x: Math.floor(width / 2),
        y: 0,
        height,
        width: Math.floor(width / 2),
      },
    })
  ])
  .then(([left, right]) => merge([left, right]))
  .then((final) => final.write('temp.png', () => browser.close()))
  .catch((error) => {
    console.error(error);
    browser.close();
  });
})()