PhantomJS image widths usually look wrong because two different dimensions are being confused: page.viewportSize controls the browser’s layout viewport, while page.clipRect controls the rectangle written to the screenshot. Set both explicitly, render, and then inspect the output file’s actual pixel dimensions. If you are producing a PDF, configure page.paperSize separately.
Understand which width PhantomJS is using
A PhantomJS capture has a layout size and an output-region size. The viewport is the virtual browser window in which the page lays itself out. The clip rectangle is the portion of that page selected for the image. A 1920-pixel viewport can therefore produce a 1200-pixel image if the clip rectangle is 1200 pixels wide; conversely, a narrow clip can capture only part of a wide layout.
| Setting | What it controls | When to change it |
|---|---|---|
page.viewportSize |
The headless browser viewport and responsive layout | When CSS breakpoints, wrapping, or page layout are wrong |
page.clipRect |
The left, top, width, and height of the captured image | When the saved PNG/JPEG dimensions or crop are wrong |
page.paperSize |
PDF page dimensions and margins | When the output is PDF rather than a raster image |
PhantomJS documentation describes viewportSize as the “actual size of the headless browser” and clipRect as the “portion of the page you are taking a screenshot of.” Treat them as separate controls rather than assuming the viewport determines the file width.
Set a fixed screenshot width and height
This complete PhantomJS script opens a page, waits for it to finish loading, sets a 1,200 × 800 viewport, captures exactly that rectangle, and writes a PNG. The clip coordinates are in CSS pixels.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
var page = require('webpage').create();
var system = require('system');
var target = system.args[1] || 'https://example.com';
page.viewportSize = {
width: 1200,
height: 800
};
page.clipRect = {
left: 0,
top: 0,
width: 1200,
height: 800
};
page.open(target, function (status) {
if (status !== 'success') {
console.log('Unable to load ' + target + ' (status: ' + status + ')');
phantom.exit(1);
return;
}
page.render('shot.png');
console.log('Saved shot.png at the requested 1200x800 capture rectangle');
phantom.exit();
});Run it with your PhantomJS executable and a URL:
phantomjs capture.js https://example.comThe official render example uses a 1920 × 1080 viewport. That is an example configuration, not a requirement. Choose dimensions that match the design or test you need.
Diagnose a wrong-width image in order
- Confirm the file type.
page.render()writes a rendered page to an image file or buffer. Do not use PDF assumptions when checking a PNG, JPEG, or WebP. - Log the values before opening the page. Verify that the script actually assigns numeric
widthandheightvalues topage.viewportSize. - Inspect the clip rectangle. Check
left,top,width, andheight. A staleclipRectfrom another capture is a common reason for a narrower file. - Compare pixels after rendering. Use an image metadata utility such as your operating system’s image inspector or ImageMagick’s
identify shot.png. Compare the reported pixel width and height with the clip values, rather than judging by how much page content is visible. - Separate layout from cropping. If the output file has the requested dimensions but text wraps at an unexpected breakpoint, change
viewportSize. If layout is correct but the file dimensions or visible region are wrong, changeclipRect.
Capture a page region deliberately
Use non-zero coordinates when you need a crop inside a larger page. For example, this captures a 900 × 600 region beginning 100 pixels from the left and 200 pixels from the top:
page.viewportSize = { width: 1400, height: 1000 };
page.clipRect = {
left: 100,
top: 200,
width: 900,
height: 600
};
page.render('region.png');The viewport must be large enough for the region you intend to capture. A clip rectangle does not redesign the page; it only selects a portion of the rendered surface.
Full-page and element-sized captures
For a page taller than the viewport, first determine the document dimensions inside the page, then use those values for the viewport and clip rectangle. This pattern captures the document’s scrollable height:
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemspage.open('https://example.com', function (status) {
if (status !== 'success') {
phantom.exit(1);
return;
}
var size = page.evaluate(function () {
return {
width: Math.max(document.body.scrollWidth, document.documentElement.scrollWidth),
height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
};
});
page.viewportSize = { width: size.width, height: size.height };
page.clipRect = { left: 0, top: 0, width: size.width, height: size.height };
page.render('full-page.png');
phantom.exit();
});This measures the page after loading, so pages that insert content asynchronously may require an explicit delay or a page-ready condition before measuring. Extremely wide documents can also create large files and high memory use; capture logical sections when a single full-page image is unnecessary.
Fix CSS layout problems that only look like width errors
A file can have the correct pixel width while its content appears too narrow. Check these cases:
- A responsive breakpoint is active because the viewport is smaller than expected. Increase
page.viewportSize.width. - The page has a centered container with a fixed or maximum CSS width. The image remains wide, but the content does not fill it.
- Horizontal overflow extends beyond the chosen clip rectangle. Increase the clip width or capture the intended element instead of the body.
- Device-pixel assumptions are being applied to CSS pixels. PhantomJS settings are expressed in CSS pixels; inspect the saved file rather than inferring a retina scale that the script never set.
- Web fonts, images, or scripts have not finished loading. Capture only after the page reaches the state you require.
PDF output uses paperSize, not clipRect
When page.render() targets a PDF, configure page.paperSize. Supported units include mm, cm, in, and px; if no unit is supplied, PhantomJS interprets the value as pixels. A PNG fix does not automatically set PDF page dimensions.
page.paperSize = {
width: '210mm',
height: '297mm',
margin: '10mm'
};
page.render('document.pdf');Use landscape: true where your PhantomJS build supports that paper-size option, or swap the width and height values explicitly. Validate the generated PDF’s page size with a PDF inspector because PDF points, physical units, and raster pixels are different measurements.
Recommended Free Tools
Rank #3
Handle transparent backgrounds separately
A transparent background is not a width mismatch. PhantomJS leaves the page background transparent when the page does not define one. If a solid image is required, set the background before rendering:
page.evaluate(function () {
document.body.bgColor = 'white';
});
page.render('white-background.png');Alternatively, ensure the site’s CSS defines the intended background. Check alpha/transparency independently from the image’s pixel dimensions.
Troubleshooting common failures
The image is narrower than viewportSize
Inspect page.clipRect.width. If it is set, the saved image follows the capture rectangle, not the viewport width. Remove the clip rectangle to capture the default viewport region, or set its width to the required output width.
The image has the right width but content is cut off
The crop is too small or starts at the wrong coordinate. Increase clipRect.width, adjust left, or calculate document dimensions after load for a full-page capture.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteRank #4
![MixPad Free Multitrack Recording Studio and Music Mixing Software [Download]](https://m.media-amazon.com/images/I/71ltIxIuz1L._SL160_.jpg)
- Create a mix using audio, music and voice tracks and recordings.
- Customize your tracks with amazing effects and helpful editing tools.
- Use tools like the Beat Maker and Midi Creator.
- Work efficiently by using Bookmarks and tools like Effect Chain, which allow you to apply multiple effects at a time
- Use one of the many other NCH multimedia applications that are integrated with MixPad.
Text wraps differently from a normal browser
The viewport is changing responsive CSS. Set the intended page.viewportSize before page.open(), and use the same width for repeated comparisons.
Dynamic content is missing
page.open() returning success means the document loaded, not necessarily that every asynchronous component finished. Add a controlled delay or poll for a known DOM condition before measuring and rendering.
A PDF has unexpected page dimensions
Configure and inspect page.paperSize. Do not expect clipRect or a PNG viewport setting to define PDF paper.
The output looks black or transparent
Check the page background and render only after the page has loaded. Set document.body.bgColor when a white background is required, then verify the image’s alpha channel separately.
Best Value
![MixPad Multitrack Recording Software for Sound Mixing and Music Production Free [Mac Download]](https://m.media-amazon.com/images/I/51kaO82jYOL._SL160_.jpg)
- Mix an audio, music and voice tracks
- Record single or multiple tracks simultaneously
- Intuitive tools to split, trim, join, and many other editing features
- Loaded with audio effects including EQ, compression, reverb, and more.
- Load an audio file and export to all popular audio formats from studio quality wav to high compression formats
Make captures repeatable
- Keep viewport and clip values in named variables so every capture records the requested dimensions.
- Use the same PhantomJS version, URL state, cookies, and load timing for visual comparisons.
- Log the target URL, viewport, clip rectangle, output format, and final file dimensions.
- Prefer a fixed clip rectangle for regression tests; use document measurements only when full-page output is the requirement.
- Limit full-page captures to practical dimensions to avoid unnecessary memory consumption.
Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server. Its one-call endpoint can return PNG, JPEG, WebP, or PDF without maintaining PhantomJS. The API accepts the target URL and your access key:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for all options. Equivalent requests are:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before capture, ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Frequently Asked Questions
Can clipRect be larger than the viewport?
Use a viewport large enough for the region you need. For document-sized output, measure the page and set both values deliberately rather than relying on an oversized crop.
Does a transparent background change the image width?
No. Transparency is a background and alpha-channel issue; verify it separately from viewport and clip dimensions.
Which setting controls PDF page size?
Use page.paperSize, with an explicit unit such as mm, cm, in, or px.
Quick Recap
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.
