Skip to content

Screenshot

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

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 →