ScreenshotNeo

BlogHow-to

How to capture a specific element with ApiFlash

Use ApiFlash’s `element` parameter with a CSS selector to capture the first matching element. Learn how to wait for dynamic content, handle errors, and choose the right capture mode.

By the ScreenshotNeo team4 October 20266 min read

To capture one element with ApiFlash, send its CSS selector in the element parameter. ApiFlash captures the first matching element. URL-encode the selector in GET requests. If the element appears only after the page renders, use wait_for to wait for a selector that identifies it. See the ApiFlash documentation for current parameter behavior and limits.

1. Make a basic element capture

The endpoint is https://api.apiflash.com/v1/urltoimage. Supply your access key, the page URL, and a CSS selector. This example captures the first element with the ID main-content:

curl -G 'https://api.apiflash.com/v1/urltoimage' \
  --data-urlencode 'access_key=YOUR_ACCESS_KEY' \
  --data-urlencode 'url=https://example.com' \
  --data-urlencode 'element=#main-content' \
  -o element.png

Replace the placeholder key, page URL, and selector. The request returns image bytes by default. GET query parameters must be URL-encoded; --data-urlencode handles that for the selector and URL in this example.

Python

import requests

response = requests.get(
    "https://api.apiflash.com/v1/urltoimage",
    params={
        "access_key": "YOUR_ACCESS_KEY",
        "url": "https://example.com",
        "element": "#main-content",
    },
    timeout=90,
)
response.raise_for_status()
with open("element.png", "wb") as image:
    image.write(response.content)

Node.js

const params = new URLSearchParams({
  access_key: 'YOUR_ACCESS_KEY',
  url: 'https://example.com',
  element: '#main-content',
});

const response = await fetch(
  `https://api.apiflash.com/v1/urltoimage?${params}`
);
if (!response.ok) {
  throw new Error(`ApiFlash returned HTTP ${response.status}`);
}
const image = Buffer.from(await response.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('element.png', image));

For applications that cannot use a long query string, ApiFlash also accepts POST form data. Keep the access key out of public client code and logs. The available research confirms form POST support; check the vendor documentation for the exact request details you use in production.

2. Wait for late-rendered elements

Single-page apps, lazy-loaded sections, and client-rendered content may not exist when the browser first visits the page. Add wait_for with a selector for an element that appears when the content is ready:

curl -G 'https://api.apiflash.com/v1/urltoimage' \
  --data-urlencode 'access_key=YOUR_ACCESS_KEY' \
  --data-urlencode 'url=https://example.com/products' \
  --data-urlencode 'element=.product-card' \
  --data-urlencode 'wait_for=.product-card' \
  -o product.png

ApiFlash documents a 15-second failure timeout when no element matches wait_for. Choose a wait selector that reliably indicates the target is present. ApiFlash waits for network idle by default, but network idle alone may not mean that a particular dynamic element has been inserted. Prefer a selector or page-state wait where available over an arbitrary fixed delay.

3. Choose the right capture mode

Need Use Important behavior
One DOM element element with a CSS selector Captures the first matched element.
A rectangular region at known coordinates crop Specify left, top, width, and height.
The whole page full_page=true This mode ignores element.
Nearby overlapping content too element_overlap Use when overlapping elements should be included.

Element capture is useful when the desired content is defined by the page structure. A coordinate crop can be more appropriate for a fixed region that does not map neatly to one element, but coordinates depend on the rendered layout. Do not combine full_page=true with element expecting the element selector to take effect.

Other documented capture controls include output format, viewport dimensions, wait_until, and wait_for. Check ApiFlash’s current documentation for supported values and limits before relying on a particular setting.

4. Troubleshoot common problems

Symptom Likely cause What to do
The wrong part of the page is captured The selector matches multiple nodes, and the first match is not the intended one. Use a more specific CSS selector and verify it against the page’s DOM.
The target is missing or the wait fails The target or the wait_for selector never appears before the documented 15-second timeout. Confirm both selectors in the rendered page, wait for a stable parent or target, and check whether the page requires authentication or user interaction.
The capture shows incomplete dynamic content Network idle did not correspond to the target being ready, or the content is loaded later. Wait for a selector that signals readiness. Use a fixed delay only if no reliable page-state condition exists.
The selected element is ignored full_page=true is enabled. Disable full-page mode for an element capture.
A GET request fails or selects the wrong value Characters such as #, spaces, or punctuation were not encoded correctly. Use an HTTP client’s query-parameter encoder or curl’s --data-urlencode.
The site returns a challenge or blocks the capture Cloudflare or similar bot protection may prevent the service from accessing the page. ApiFlash describes proxy use as a possible site-dependent workaround; it is not a guaranteed bypass. Respect the site’s access controls.
The saved file is not a usable image The request returned an error response or a non-image response. Check the HTTP status and response headers before saving bytes. ApiFlash supports response_type=json for JSON responses; consult its documentation for the returned fields.

5. Reliability, performance, and cost considerations

  • Make selectors stable. Prefer IDs or durable semantic classes over generated class names that change between deployments.
  • Wait for the thing you need. A selector wait makes the capture condition explicit; a fixed delay can waste time on fast pages and still be too short on slow ones.
  • Handle failures at the HTTP boundary. Check status codes before treating the response body as an image, set a client timeout appropriate to your workflow, and retry only errors that may be transient.
  • Keep credentials private. Make requests from a server-side component when an access key must not be exposed in browser code. Avoid logging full URLs if they contain sensitive query parameters.
  • Plan around site variability. Authentication, bot checks, page changes, and network conditions can affect captures. Validate selectors when the source page changes.
  • Check current pricing and limits. The supplied ApiFlash research does not establish current plan prices, quotas, or performance figures, so consult the provider’s current documentation and pricing before estimating production cost.

6. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One request can capture an element using a CSS selector, along with full-page and other capture modes. Before capture, cookie banners are accepted like a visitor and more than 60 known consent platforms, newsletter popups, and chat widgets can be removed; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status.

Here is a cURL request for a normal page capture (replace the target URL and key). See the ScreenshotNeo API documentation for the element selector parameter and the other options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

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)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

For the selector capture, add the CSS selector parameter documented by ScreenshotNeo. ScreenshotNeo also has an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up for ScreenshotNeo’s free 1,000 screenshots a month, with no card required.

7. FAQ

Does ApiFlash capture every element matching the selector?

No. It captures the first matching element.

Can I use a CSS ID selector in a GET request?

Yes. Encode the selector so characters such as # are transmitted as query data rather than interpreted as part of the URL fragment.

Can I return JSON instead of image bytes?

ApiFlash documents response_type=json. Use its documentation to inspect the response structure and supported output handling.

Is a proxy guaranteed to get past bot protection?

No. ApiFlash notes that proxy use may help depending on the site’s protection, but the result is site-dependent.

Sources