Skip to content

Screenshot

The Screenshot plugin captures images of web pages or HTML content.

Powered by Playwright

This plugin passes your options directly to Playwright—no FloImg abstraction layer. See the Playwright docs for all screenshot options.

Installation

pnpm add @teamflojo/floimg-screenshot

Registration

import createClient from '@teamflojo/floimg';
import screenshot from '@teamflojo/floimg-screenshot';

const floimg = createClient();
floimg.registerGenerator(screenshot());

Usage

const image = await floimg.generate({
  generator: 'screenshot',
  params: {
    url: 'https://example.com'
  }
});

Parameters

Parameter	Type	Required	Description
`url`	string	Yes*	URL to capture
`html`	string	Yes*	HTML content to render
`width`	number	No	Viewport width (default: 1280)
`height`	number	No	Viewport height (default: 720)
`fullPage`	boolean	No	Capture full scrollable page
`selector`	string	No	CSS selector to capture
`waitFor`	number	No	Wait time in ms before capture
`deviceScaleFactor`	number	No	Device scale (default: 1)

*Either url or html is required.

Examples

Capture URL

const screenshot = await floimg.generate({
  generator: 'screenshot',
  params: {
    url: 'https://github.com',
    width: 1920,
    height: 1080
  }
});

Full Page Screenshot

const fullPage = await floimg.generate({
  generator: 'screenshot',
  params: {
    url: 'https://example.com/long-page',
    fullPage: true
  }
});

Capture Specific Element

const element = await floimg.generate({
  generator: 'screenshot',
  params: {
    url: 'https://example.com',
    selector: '.hero-section'
  }
});

Render HTML

const html = `
  <html>
    <head>
      <style>
        body { font-family: sans-serif; padding: 40px; }
        h1 { color: #7c3aed; }
      </style>
    </head>
    <body>
      <h1>Hello, World!</h1>
      <p>This is rendered HTML.</p>
    </body>
  </html>
`;

const rendered = await floimg.generate({
  generator: 'screenshot',
  params: {
    html,
    width: 800,
    height: 600
  }
});

Wait for Dynamic Content

const dynamic = await floimg.generate({
  generator: 'screenshot',
  params: {
    url: 'https://example.com/dashboard',
    waitFor: 3000 // Wait 3 seconds for JS to load
  }
});

High DPI / Retina

const retina = await floimg.generate({
  generator: 'screenshot',
  params: {
    url: 'https://example.com',
    width: 1280,
    height: 720,
    deviceScaleFactor: 2 // 2x resolution
  }
});

const card = await floimg.generate({
  generator: 'screenshot',
  params: {
    html: `
      <div style="
        width: 1200px;
        height: 630px;
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: system-ui;
        color: white;
      ">
        <div style="text-align: center;">
          <h1 style="font-size: 72px; margin: 0;">My Article Title</h1>
          <p style="font-size: 32px; opacity: 0.9;">A compelling subtitle here</p>
        </div>
      </div>
    `,
    width: 1200,
    height: 630
  }
});

Requirements

This plugin requires a Chromium-based browser. In production, ensure Puppeteer can launch Chrome:

# On Ubuntu/Debian
apt-get install chromium-browser

# Or use Puppeteer's bundled Chromium
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=false pnpm install

See Also

Generate - Core generation method
Transform - Modify screenshots

Want to experiment visually? Try Screenshot in floimg-studio →