Next-dynamic-image NPM

next-dynamic-image

A library based on puppeteer to dynamically generate screenshots of HTML elements. I developed this library not for production use, but rather to understand how the npm ecosystem worked.

API Reference

getScreenshot({options})

Options	Type	Description
`fullPage`	`boolean`	When true, takes a screenshot of the full scrollable page. Defaults to `false`.
`html`	`string`	The template for which the screenshot will be taken.
`width`	`number`	width of the screenshot. Defaults to `1600`
`height`	`number`	height of the screenshot. Defaults to `900`
`tailwind`	`boolean`	Whether to include `tailwindcss` in the returned HTML or not. Defaults to `false`
`path`	`string`	optional - path to store the screenshot in. Defaults to `null`.
`encoding`	`boolean`	The encoding of the image, can be either base64 or binary. Defaults to `binary`.
`omitBackground`	`boolean`	Hides default white background and allows capturing screenshots with transparency. Defaults to `false`.
`captureBeyondViewport`	`boolean`	When true, captures screenshot beyond the viewport. When false, falls back to old behaviour, and cuts the screenshot by the viewport size. Defaults to `true`.

Note

Although providing numerical values for width and height is not necessary, it is recommended to do so.

Example

Functional

import {getScreenshot} from 'next-dynamic-image'

const screenshot = await getScreenshot({
  html: `<h1>Hello world</h1>,
  height: 1600,
  width: 900,
  tailwind: true,
  path: `downloads/${Date.now()}.jpg`,
  // other options
});

console.log(screenshot);
// <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 02 58 00 00 01 2c 08 06 00 00 00 1f 3d cd 96 00 00 00 01 73 52 47 42 00 ae ce 1c e9 00 00 0b 6f ... 2947 more bytes>

Class Based

import {GetScreenshot} from 'next-dynamic-image'

const screenshot = new GetScreenshot()

const screenshotBuffer = screenshot.getScreenshot({
  // options
})
console.log(screenshotBuffer)