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](https://devtoolbox.dev). The base URL for all API calls is: ``` https://api.toolcenter.dev/v1 ``` ### Basic Full Page Screenshot The simplest way to capture a full page screenshot is a single API call: ```bash 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: ```python 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 ```javascript 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: ```bash # 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: ```bash 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. ### Blocking Cookie Banners Cookie consent popups can ruin a full page screenshot. Use the `block_cookie_banners=true` parameter to automatically dismiss them: ```bash 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 | ```bash # 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: ```python 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: 1. **Use WebP format** when possible — files are 25-35% smaller than PNG with comparable quality 2. **Set appropriate viewport widths** — wider viewports mean taller pages and larger files 3. **Cache results** — if you are capturing the same URL repeatedly, cache the screenshot and refresh on a schedule 4. **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](https://devtoolbox.dev) and start capturing full page screenshots in minutes.