micahstubbs / screenshot-service

services to create a screenshot of a web page. optimized for screenshotting interactive data graphics.
0 stars 0 forks source link

viewport and resize parameters for controlling screenshot dimensions #14

Closed micahstubbs closed 5 years ago

micahstubbs commented 5 years ago

feature idea:

support screenshot size presets like

preview 960px by 500px thumbnail 230px by 120px

as well as caller-specified screenshot dimensions.

could fix the crop to originate at the top-left 0,0 point, or could also support an xy translate param as well to set the origin point for the crop 🤔


per @curran https://github.com/micahstubbs/screenshot-service/issues/9#issuecomment-431564055

Some snippets that may be useful (from the thumbnail generation of datavis.tech):

const setThumbnail = require('../../db/actions/setThumbnail')
const generateThumbnailBuffer = require('./generateThumbnailBuffer')

module.exports = async (browser, sandbox, shareDbDoc) => {
  const html = await sandbox({id: shareDbDoc.id})
  const page = await browser.newPage()
  const thumbnailBuffer = await generateThumbnailBuffer(page, html)
  const thumbnail = thumbnailBuffer.toString('base64')
  setThumbnail(shareDbDoc, thumbnail)
}
const sharp = require('sharp')

module.exports = async generateThumbnailBuffer(page, html) => {
  await page.setViewport({width: 960, height: 500})
  await page.setContent(html)
  await page.waitFor(5000)

  const buffer = await page.screenshot()
  await page.close()

  return sharp(buffer)
    .resize(230, 120)
    .toBuffer()
}
const browser = await puppeteer.launch({args: ['--no-sandbox']})