Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use Puppeteer’s page.screenshot() method with a clip rectangle to capture a selected part of a rendered page. Set its x, y, width, and height to define the region. If you want to capture a particular DOM element rather than a coordinate-based rectangle, use that element’s screenshot() method instead.
Capture a rectangular area with clip
This runnable example opens a page and saves a 640-by-360-pixel region beginning at coordinates (40, 80):
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.screenshot({
path: 'clip.png',
clip: { x: 40, y: 80, width: 640, height: 360 },
});
} finally {
await browser.close();
}
})();Change the URL and rectangle to suit your page. The clip is defined by its bounding-box coordinates; make sure those coordinates match the rendered layout you intend to capture. Puppeteer’s documentation describes Page.screenshot() and the clip options in its screenshots guide and ScreenshotOptions reference.
Recommended Free Tools
Choose coordinates or capture a DOM element
| Method | Best for | How the target is selected |
|---|---|---|
page.screenshot({ clip }) |
An arbitrary rectangular area, such as a fixed region of a layout. | Explicit x, y, width, and height values. |
elementHandle.screenshot() |
A known page element whose rendered bounds define the desired image. | Find the element in the DOM, then call its screenshot method. By default, ElementHandle.screenshot() tries to scroll the element into view if it is hidden. |
The official Puppeteer screenshots guide documents both page and element screenshots. Prefer the element method when the element itself—not a manually measured rectangle—is the target.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
Example: screenshot a selected element
const element = await page.$('.product-card');
if (!element) {
throw new Error('Could not find .product-card');
}
await element.screenshot({ path: 'product-card.png' });Understand the clip and screenshot options
A screenshot clip is a rectangle with x, y, width, and height; its optional scale defaults to 1. See the ScreenshotClip API for the type definition.
path: Provide a file path to save the image. Puppeteer infers the image type from the extension. If you omitpath, the screenshot is not written to disk.typeandquality: PNG is the default image type. JPEG and WebP are also available;qualityapplies to non-PNG images and ranges from 0 to 100.omitBackground: Set it totrueto hide the default white background and permit transparency.captureBeyondViewport: The documented default istruewhen a clip is present andfalsewhen it is absent. This is an option default, not a promise of identical behavior across every browser and version configuration.fullPage: Set it totrueto capture the full page. That is a different capture intent from clipping one selected rectangle.
These options are detailed in the ScreenshotOptions reference. The Puppeteer API docs displayed version 25.12.0 when accessed on 2026-10-03; options may change in later versions.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Save the image or use the returned data
When you provide path, Puppeteer writes the image to that location. Without a path, page.screenshot() returns image data as a Uint8Array by default. Set encoding: 'base64' to request a base64 string instead. See the Page.screenshot() API.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesconst imageBytes = await page.screenshot({
clip: { x: 40, y: 80, width: 640, height: 360 },
});
// imageBytes is a Uint8Array by default.Use the returned bytes directly in code that accepts binary image data, or specify path when you want a file saved by Puppeteer.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
Troubleshoot clipped screenshots
- The saved image shows the wrong region: Recheck the clip’s position and dimensions against the page layout being captured. The four values describe the rectangle; adjust them to the intended rendered region.
- No image file appears: Check that you passed a
path. Without one, Puppeteer returns image data instead of writing a file. - The output format is unexpected: Check the filename extension when relying on type inference, or specify a supported
type. PNG is the default. - You need an element, not a measured rectangle: Select the DOM element and call
elementHandle.screenshot(). The method attempts to scroll a hidden element into view by default. - You captured more than the selected area: Confirm that you set
clipand did not usefullPage: truefor a full-page capture.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its API can return an image or PDF from a single GET request, without setting up Puppeteer locally:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for the request options. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month—no card required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Which Puppeteer documentation covers screenshot clipping?
The official references are the screenshots guide, Page.screenshot() API, ScreenshotClip type, and the ScreenshotOptions reference.
Quick Recap
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
