The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →To create a thumbnail with a PhantomJS overlay, load the page, add the badge or watermark inside the page with page.evaluate(), wait for every image and font to finish loading, set clipRect and zoomFactor, then call page.render(). Keeping the overlay in the same document ensures it is painted in the same render pass as the page.
What you need before you start
- A PhantomJS installation and a JavaScript file run with
phantomjs script.js. - A reachable source URL, or HTML that you can provide with
page.setContent(). - A defined thumbnail width, height, aspect ratio and output format.
- A readiness condition for page images, fonts and overlay assets. PhantomJS does not provide one universal “everything is ready” event.
PhantomJS is legacy software: its homepage states, “Important: PhantomJS development is suspended until further notice.” Use this method when maintaining an existing PhantomJS pipeline. For a new production system, compare a maintained headless browser and a hosted renderer for CSS and font fidelity, security, operating cost and API stability.
Minimal PhantomJS overlay thumbnail
Save this as thumbnail.js. The example adds a fixed “PREVIEW” badge before capturing a 1280×720 region.
var page = require('webpage').create();
page.viewportSize = { width: 1280, height: 720 };
page.clipRect = { top: 0, left: 0, width: 1280, height: 720 };
page.open('https://example.com/', function (status) {
if (status !== 'success') {
console.log('Unable to load page');
phantom.exit(1);
return;
}
page.evaluate(function () {
var badge = document.createElement('div');
badge.textContent = 'PREVIEW';
badge.style.position = 'fixed';
badge.style.right = '24px';
badge.style.bottom = '24px';
badge.style.padding = '8px 12px';
badge.style.background = 'rgba(0,0,0,.72)';
badge.style.color = '#fff';
badge.style.font = 'bold 20px sans-serif';
badge.style.zIndex = '2147483647';
document.body.appendChild(badge);
});
page.zoomFactor = 0.5;
page.render('thumbnail.png');
phantom.exit();
});Run it with phantomjs thumbnail.js. The resulting PNG is rendered after the overlay is appended. The CSS values are choices made by this example, not PhantomJS defaults.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
Build the overlay safely in the page context
Use page.evaluate() for DOM overlays
page.evaluate(function () { ... }) executes in the loaded document. Create a div, img, SVG or canvas, set position:absolute or position:fixed, choose an edge offset, assign a high z-index, and append it to document.body. Arguments and return values must be JSON-serializable; do not try to return DOM nodes or functions.
Watermarks and image badges
A text watermark can be generated entirely with CSS. For an image watermark, create an img element and wait for its onload event before rendering. A remote image must be reachable by the page, and cross-origin restrictions can affect scripts that inspect it. Keep the watermark in the same document rather than compositing a second image after PhantomJS finishes.
External helper code
Use page.injectJs('helper.js') for a local helper or page.includeJs(url, callback) for a remote library. Treat the include callback as script-load completion, not as proof that every image, font or asynchronously generated component is ready.
Wait for the page and overlay assets
Calling page.render() immediately after page.open() can capture a blank image, missing lazy images or an incomplete badge. Implement an explicit readiness test that matches your page.
Free tools Windows power users keep installed
One-click scans. No signup required.
Polling document images
function waitForImages(done, attempts) {
attempts = attempts || 0;
var ready = page.evaluate(function () {
for (var i = 0; i < document.images.length; i++) {
if (!document.images[i].complete) return false;
}
return true;
});
if (ready || attempts >= 60) return done(ready);
setTimeout(function () { waitForImages(done, attempts + 1); }, 100);
}
waitForImages(function (allReady) {
if (!allReady) console.log('Timed out waiting for images');
page.render('thumbnail.png');
phantom.exit(allReady ? 0 : 2);
});For a watermark image, return a status from page.evaluate() that checks its complete and naturalWidth. For web fonts or application data, add a page-specific flag, selector check or delay. A timeout should produce a useful diagnostic rather than silently publishing a partial thumbnail.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Control crop, scale and output quality
Viewport versus crop
page.viewportSize controls the browser layout. page.clipRect captures only the rectangle you specify:
page.viewportSize = { width: 1440, height: 900 };
page.clipRect = { top: 120, left: 0, width: 1200, height: 675 };Use the viewport to make responsive breakpoints deterministic, then use the clip rectangle for the final aspect ratio. If the crop must follow an element, measure its bounding rectangle in page.evaluate(), convert the JSON result into a clip rectangle, and validate that it remains inside the viewport.
Zoom and thumbnail dimensions
page.zoomFactor scales rendering. The official API documentation uses 0.25 as a thumbnail-preview example; it is an example configuration, not a performance measurement. Compare the final pixel dimensions and text legibility at the actual display size. A smaller zoom can reduce dimensions, but it can also make labels unreadable.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsPNG, JPEG, GIF and PDF
PhantomJS supports PNG, JPEG, GIF and PDF output. Use PNG for sharp text, transparency or interface graphics; use JPEG when photographic content and file size matter. JPEG quality is explicitly configurable:
page.render('thumbnail.jpg', { format: 'jpg', quality: 90 });The documentation does not establish a universal quality setting. Choose one by checking the target pixel size, artifacts and file-size budget.
Rank #3
Fully controlled compositions with setContent()
When the source page is not needed, construct an HTML string containing the source image, text and overlays, then call:
page.setContent(html, 'http://localhost/thumbnail');
page.render('composed.png');setContent() changes the document and URL without making an HTTP request. External images still need network access. For local assets, serve them through a small local HTTP server or embed them as data URLs; do not assume a file: URL works under every security configuration.
Crashes, 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 minuteWindows 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 reinstallReliability checklist for remote pages
- Check the
statuspassed topage.open()and exit nonzero on failure. - Account for redirects, authentication and pages that build content asynchronously.
- Wait for lazy-loaded images, fonts and overlay assets.
- Use a high
z-index, while checking whether transforms or stacking contexts change positioning. - Keep viewport, clip rectangle, zoom and output format fixed for reproducible jobs.
- Log readiness timeouts and the URL so partial captures can be retried.
Common failures and fixes
“Unable to load page”
The URL may be unreachable, redirected to an authentication page, blocked by a network policy or failing TLS negotiation. Confirm the URL from the same machine, handle redirects and credentials explicitly, and stop rather than rendering an error page as a thumbnail.
The overlay is missing
Ensure the code runs after a successful page.open(), append the element to the document, and verify its computed position. A transformed ancestor or stacking context can defeat an apparently high z-index; attach the overlay directly to body and use fixed positioning for viewport badges.
The overlay image is blank
Wait for its load event or poll complete and naturalWidth. Check that the URL is reachable and that the page is permitted to load it.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The thumbnail is cropped incorrectly
Remember that viewport dimensions affect layout while clipRect affects the captured rectangle. Log both rectangles, include scroll position in your calculation, and test at the target responsive breakpoint.
Text or fonts differ between runs
Wait for fonts, use a controlled environment and avoid relying on external resources that can change. PhantomJS’s older rendering engine may not match modern browser CSS behavior.
The process never exits
Call phantom.exit() on every success and error path, including readiness timeouts and failed loads.
Or skip the browser setup
For a maintained hosted workflow, ScreenshotNeo returns a screenshot or PDF from one GET request. It accepts the page before capture to remove cookie-consent banners, newsletter popups and chat widgets; bot checks, blank pages, failed loads and cache hits are not billed, and response headers identify the page verdict and billing result. Its MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
Use the ScreenshotNeo documentation for all options, including full-page lazy-image loading, CSS-selector element capture, dark mode, device presets, retina scale, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparency, resizing, caching, signed links, asynchronous webhooks, bulk capture and usage reporting.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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}`);There are 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000 shots, and every feature is included on every plan. Create a free ScreenshotNeo account.
Choosing between legacy PhantomJS and a hosted renderer
| Consideration | PhantomJS locally | Hosted ScreenshotNeo |
|---|---|---|
| Setup | You maintain the runtime, networking and readiness logic. | One HTTP request; an MCP server is also available. |
| Overlays | Inject DOM, SVG or canvas code with page.evaluate(). |
Use custom CSS and JavaScript and selector-based capture. |
| Failure billing | Your infrastructure still spends runtime resources. | Bot checks, blank pages, timeouts and failed loads are not billed. |
| Maintenance | Development is suspended. | Hosted API with documented options and usage API. |
Frequently Asked Questions
Can PhantomJS capture a full-page thumbnail?
Yes. Set the viewport and page dimensions to cover the required content, or calculate a clip rectangle after the page lays out. Wait for lazy images before rendering.
Can I add an overlay without changing the source site?
Yes. Inject it only in the PhantomJS document with page.evaluate(); the remote site is not modified.
Is zoomFactor the same as resizing the finished file?
No. zoomFactor changes rendering scale. It can affect text and raster quality, so inspect the final dimensions and legibility.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →What should replace PhantomJS for a new project?
Evaluate a maintained headless browser or a hosted renderer against your required CSS fidelity, fonts, security model, cost and operational burden.
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.
