The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →For HTML/CSS submitted to HTMLCSStoImage, set render_when_ready: true and call ScreenshotReady() only after the JavaScript work you need in the image has finished. For a URL capture, use an element with the ID HCTIReadyNow instead: HTMLCSStoImage’s helper is not available for URL captures. If you cannot add a readiness signal, use ms_delay as a fixed-pause fallback, understanding that it cannot guarantee asynchronous work is complete.
Choose a readiness method for your capture
The right approach depends on whether you submit HTML/CSS or ask the service to capture a URL, and on whether you can control the page’s code.
| Method | Best fit | Limitation |
|---|---|---|
render_when_ready and ScreenshotReady() |
Submitted HTML/CSS when your code can signal that required work is complete | The signal is only as complete as the work your code waits for before calling the helper. |
HCTIReadyNow element |
URL capture when you can modify the page | Your page must insert the marker after the content to capture is ready. |
ms_delay |
A short, predictable extra pause, or a page with no usable readiness signal | A fixed delay may be too short on a slow run or waste time on a fast one. |
| Browser automation selector or marker wait | Your own Puppeteer or Playwright browser, where you can observe page state | The selector or marker must indicate the useful content is ready, not merely that an empty container exists. |
For submitted HTML and CSS: signal readiness explicitly
- Set the API parameter
render_when_readytotrue. - Start the JavaScript that loads or creates the content for the image.
- Call
ScreenshotReady()after all content that must appear in the capture is ready.
The helper adds the readiness marker used to trigger rendering. For example, if a chart is part of the image, call the helper from the chart’s completion path; if the page needs an API response, call it after that response has been rendered. A timer can demonstrate the mechanism, but an application’s actual completion callback is a more reliable signal when one exists.
Do not call the helper merely because JavaScript has started, because an API request has begun, or because a container has appeared. The capture can proceed once the ready signal is set; any work omitted from the completion condition may not be represented in the image.
#1 Best Overall
For URL captures: add the page marker
For a URL-to-image capture, set render_when_ready: true and have the target page add an element whose ID is HCTIReadyNow once it reaches the state you want captured. The ScreenshotReady() helper is not available in URL mode because HTMLCSStoImage does not control the page’s JavaScript.
Place the marker insertion after the relevant asynchronous work and rendering. Inserting it when the page first loads, or when an empty table or chart container is created, signals readiness too early.
Rank #2
![Free Fling File Transfer Software for Windows [PC Download]](https://m.media-amazon.com/images/I/41Vq6ZqHfjL._SL160_.jpg)
- Intuitive interface of a conventional FTP client
- Easy and Reliable FTP Site Maintenance.
- FTP Automation and Synchronization
When a fixed delay is the only option
Use the ms_delay parameter to pause before generating the image. HTMLCSStoImage’s FAQ recommends starting at 500 milliseconds and increasing it as needed. That is a starting point, not a guarantee: variable network and rendering times can leave the page unfinished after the pause.
The API reference describes max_wait_ms as a maximum wait limit from 500 to 10,000 milliseconds. It is an upper bound, not an instruction to wait for the full interval. A longer maximum does not substitute for an explicit signal that the content you need is ready.
Why the normal load wait can miss JavaScript content
HTMLCSStoImage says its ordinary readiness heuristic waits for the page’s load event and then monitors additional network traffic, including external CSS and images. It says this works well in most cases, but slow-loading content can still arrive too late for a capture.
The load event does not mean every application task has finished. A later API call, chart draw, or client-side update can still be pending. Network quiet, a visible selector, and an application-owned marker each represent different conditions; none guarantees completion unless it actually corresponds to the content you want captured.
For Puppeteer or Playwright, wait for the useful state
When you manage the browser yourself, wait for an observable condition that represents the finished content, such as a populated table row or an application marker added after rendering. A selector for a container that exists before its data arrives is not enough. HTMLCSStoImage’s tutorial likewise recommends tying the wait to the useful page state rather than relying on a generic timeout.
There is no universal browser event that means every possible JavaScript task on a page has ended. Define what “ready” means for the particular screenshot, then wait for that condition. The specific selector or marker depends on the page; no single selector can be supplied for every site.
Recommended Free Tools
Best Value
Troubleshooting early or unreliable captures
- The screenshot shows an empty chart or table: Your signal may occur when the component or container is created rather than after data has been rendered. Move the signal to the component’s completion path, or wait for a populated state in browser automation.
- The screenshot is sometimes correct and sometimes incomplete: A fixed pause may be shorter than the variable time taken by requests or rendering. Prefer a completion signal tied to the required content.
ScreenshotReady()does not trigger a URL capture: That helper is for submitted HTML/CSS. For URL mode, add theHCTIReadyNowelement after the page is ready.- The capture waits but content is still missing: Check that the readiness condition includes every asynchronous task needed for the image. A signal cannot account for work that happens after it is set.
- A selector wait returns too soon: The selected element may exist before it is populated. Wait for a meaningful child, value, or application-owned marker that represents the finished content.
- A longer
max_wait_msdoes not fix timing: It limits how long the service may wait; it does not establish that rendering is complete. Use the explicit ready mechanism where available.
Or skip the browser setup
ScreenshotNeo is a website screenshot API. Its one-request endpoint returns an image or PDF:
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 API documentation for options. Cookie banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
Frequently Asked Questions
What does `render_when_ready` do?
It lets the submitted HTML/CSS page signal when HTMLCSStoImage should render the image. Call `ScreenshotReady()` after the required JavaScript work has completed.
Can I use `ScreenshotReady()` when capturing a URL?
No. For URL captures, add an element with the ID `HCTIReadyNow` after the target page reaches the state to capture.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesQuick 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.
