How to Take Full Page Screenshots Programmatically

Taking a full page screenshot of a website might sound simple, but anyone who has tried it programmatically knows the pain. Lazy-loaded images, infinite scroll, sticky headers, cookie banners — there are dozens of edge cases that make capturing an entire webpage surprisingly complex.

In this guide, you will learn how to take full page screenshots programmatically using a screenshot API, with practical code examples you can use in production today.

Why Full Page Screenshots Are Tricky

When you visit a webpage in a browser, you see only the viewport — the visible area of the page. A full page screenshot captures everything from the top of the page to the very bottom, including content you would need to scroll to see.

Here is why this is harder than it sounds:

Lazy-loaded content: Modern websites load images and content only when they scroll into view
Infinite scroll: Some pages generate content dynamically as you scroll
Fixed/sticky elements: Headers and navigation bars that follow you can appear multiple times in a stitched screenshot
Dynamic heights: JavaScript may change page height after initial load
Cookie consent banners: These overlay the content and ruin the capture

Building a reliable full page screenshot system yourself means managing a headless browser (like Puppeteer or Playwright), handling all these edge cases, and dealing with memory management, timeouts, and scaling.

The API Approach

Instead of managing your own headless browser infrastructure, a full page screenshot API handles all the complexity for you. Let us walk through how to use the ToolCenter Screenshot API to capture entire webpages.

Getting Started

First, grab your API key from the ToolCenter dashboard. The base URL for all API calls is:

Basic Full Page Screenshot

The simplest way to capture a full page screenshot is a single API call:

curl "https://api.toolcenter.dev/v1/screenshot?url=https://example.com&full_page=true&api_key=YOUR_API_KEY" \
  --output screenshot.png

The key parameter here is full_page=true. Without it, you get only the viewport (typically 1280x800 pixels). With it, the API scrolls the entire page, waits for lazy-loaded content, and stitches everything together into one seamless image.

Python Example

Here is a complete Python script for capturing full page screenshots:

import requests
import os

API_KEY = os.environ.get("DEVTOOLBOX_API_KEY")
BASE_URL = "https://api.toolcenter.dev/v1"

def capture_full_page(url, output_path="screenshot.png", width=1280, format="png"):
    """Capture a full page screenshot of any URL."""
    params = {
        "url": url,
        "full_page": True,
        "viewport_width": width,
        "format": format,
        "api_key": API_KEY,
    }

    response = requests.get(f"{BASE_URL}/screenshot", params=params)

    if response.status_code == 200:
        with open(output_path, "wb") as f:
            f.write(response.content)
        print(f"Screenshot saved to {output_path}")
        return output_path
    else:
        print(f"Error: {response.status_code} - {response.text}")
        return None

# Capture a full page screenshot
capture_full_page("https://news.ycombinator.com", "hackernews_full.png")

JavaScript (Node.js) Example

const fetch = require("node-fetch");
const fs = require("fs");

const API_KEY = process.env.DEVTOOLBOX_API_KEY;
const BASE_URL = "https://api.toolcenter.dev/v1";

async function captureFullPage(url, outputPath = "screenshot.png") {
  const params = new URLSearchParams({
    url: url,
    full_page: "true",
    viewport_width: "1280",
    format: "png",
    api_key: API_KEY,
  });

  const response = await fetch(`${BASE_URL}/screenshot?${params}`);

  if (response.ok) {
    const buffer = await response.buffer();
    fs.writeFileSync(outputPath, buffer);
    console.log(`Screenshot saved to ${outputPath}`);
  } else {
    console.error(`Error: ${response.status}`);
  }
}

captureFullPage("https://github.com", "github_full.png");

Advanced Options for Full Page Captures

Custom Viewport Width

Different viewport widths produce different layouts. You might want to capture both desktop and mobile versions:

# Desktop (1920px wide)
curl "https://api.toolcenter.dev/v1/screenshot?url=https://example.com&full_page=true&viewport_width=1920&api_key=YOUR_API_KEY" \
  --output desktop.png

# Tablet (768px wide)
curl "https://api.toolcenter.dev/v1/screenshot?url=https://example.com&full_page=true&viewport_width=768&api_key=YOUR_API_KEY" \
  --output tablet.png

# Mobile (375px wide)
curl "https://api.toolcenter.dev/v1/screenshot?url=https://example.com&full_page=true&viewport_width=375&api_key=YOUR_API_KEY" \
  --output mobile.png

Wait for Dynamic Content

Some pages need extra time for JavaScript to finish rendering. Use the delay parameter to wait before capturing:

curl "https://api.toolcenter.dev/v1/screenshot?url=https://example.com&full_page=true&delay=3000&api_key=YOUR_API_KEY" \
  --output screenshot.png

The delay is in milliseconds — 3000 means wait 3 seconds after page load.

Cookie consent popups can ruin a full page screenshot. Use the block_cookie_banners=true parameter to automatically dismiss them:

curl "https://api.toolcenter.dev/v1/screenshot?url=https://example.com&full_page=true&block_cookie_banners=true&api_key=YOUR_API_KEY" \
  --output clean_screenshot.png

Output Formats

The API supports multiple output formats:

Format	Best For
`png`	High quality, transparency support
`jpeg`	Smaller file size, photographs
`webp`	Best compression, modern browsers

# WebP format for smallest file size
curl "https://api.toolcenter.dev/v1/screenshot?url=https://example.com&full_page=true&format=webp&quality=80&api_key=YOUR_API_KEY" \
  --output screenshot.webp

Common Use Cases for Full Page Screenshots

1. Website Archiving

Capture entire pages for compliance or historical records:

import datetime

sites = [
    "https://example.com",
    "https://example.com/pricing",
    "https://example.com/terms",
]

for site in sites:
    date = datetime.date.today().isoformat()
    slug = site.split("//")[1].replace("/", "_")
    capture_full_page(site, f"archive/{date}_{slug}.png")

2. Competitor Monitoring

Track visual changes on competitor websites over time by scheduling daily full page screenshots and comparing them.

3. Documentation and Reporting

Generate visual documentation of web applications, perfect for client reports, QA documentation, or investor updates.

4. Legal Evidence

Full page screenshots serve as evidence of website content at a specific point in time — useful for intellectual property disputes or regulatory compliance.

Performance Tips

When working with full page screenshots, keep these tips in mind:

Use WebP format when possible — files are 25-35% smaller than PNG with comparable quality
Set appropriate viewport widths — wider viewports mean taller pages and larger files
Cache results — if you are capturing the same URL repeatedly, cache the screenshot and refresh on a schedule
Use webhooks for long pages — extremely long pages may take time to capture, so use async processing with webhooks instead of waiting synchronously

Conclusion

Taking full page screenshots programmatically does not have to be painful. With a screenshot API like ToolCenter, you can capture entire webpages with a single API call, handling all the edge cases — lazy loading, cookie banners, dynamic content — automatically.

Whether you are building a website archiver, monitoring tool, or just need clean captures for documentation, the API approach saves you from managing headless browser infrastructure while delivering reliable, high-quality results.

Ready to get started? Sign up for ToolCenter and start capturing full page screenshots in minutes.

Why Full Page Screenshots Are Tricky#

The API Approach#

Getting Started#

Basic Full Page Screenshot#

Python Example#

JavaScript (Node.js) Example#

Advanced Options for Full Page Captures#

Custom Viewport Width#

Wait for Dynamic Content#

Blocking Cookie Banners#

Output Formats#

Common Use Cases for Full Page Screenshots#

1. Website Archiving#

2. Competitor Monitoring#

3. Documentation and Reporting#

4. Legal Evidence#

Performance Tips#

Conclusion#