screenshot.js

const fs = require("fs")
const puppeteer = require("puppeteer")

// First level config
const project = "atelier/05"
const count = 50


// Second level config
const folder = `screenshots/${project}/`


const delay = time => new Promise(resolve => setTimeout(resolve, time))

const getRandomInt = max => Math.floor(Math.random() * max)

const screenshot = async (browser, url, folder) => {
  const page = await browser.newPage()
  await page.goto(url)

  const canvas = await page.$("canvas")
  const bounding_box = await canvas.boundingBox()

  await page.screenshot({
    path: folder,
    // fullPage: true,
    clip: {
      x: bounding_box.x,
      y: bounding_box.y,
      width: Math.min(bounding_box.width, page.viewport().width),
      height: Math.min(bounding_box.height, page.viewport().height)
    }
  })

  await page.close()


}

let browser

const run = async () => {


  await fs.promises.mkdir(folder, { recursive: true })

  //
  browser = await puppeteer.launch({
    headless: true,
    args: [
      "--window-size=1920,1080"
    ],
    defaultViewport: {
      width: 1920,
      height: 1080
    }
  })

  for (let i = 0; i < count; i++) {
    let no = getRandomInt(1000000)
    //
    const url = `http://localhost:8083#${no}`
    console.log(`${i + 1}/${count}> screenshotting ${url}`)
    //
    await delay(100)
    await screenshot(browser, url, `${folder}/${i}_${no}.png`)
  }

}

run().then(() => browser.close())