One Screenshot icon

One Screenshot

Prend une capture d'écran d'une URL, de HTML ou de Markdown en utilisant l'API One Screenshot.
Join our community

Overview

This node captures screenshots or converts content into images using the One Screenshot API. It supports three types of input sources: a web page URL, raw HTML code, or Markdown text. Users can customize the capture with various options such as image format, viewport size, CSS selectors to target or hide, delays, and blocking unwanted elements like ads or cookie banners.

Common scenarios include:

  • Automatically generating website previews from URLs.
  • Converting HTML snippets or Markdown content into images for documentation or social media sharing.
  • Capturing specific parts of a webpage by CSS selector.
  • Creating PDFs or images in different formats for reports or presentations.

For example, you could input a blog post's Markdown content and get a styled image preview, or capture a full-page screenshot of a product page URL with ads and trackers blocked.

Properties

Name Meaning
Source Type of content to capture: URL, HTML, or Markdown.
URL à capturer The full URL of the web page to capture (required if Source is URL).
Contenu HTML Raw HTML code to render as an image (required if Source is HTML).
Contenu Markdown Raw Markdown code to render as an image (required if Source is Markdown).
Options Collection of optional settings to customize the capture:
- Format Output image format: PNG, JPEG, WebP, or PDF.
- Sélecteur CSS CSS selector to capture only a specific element on the page.
- Page Complète Capture the entire page instead of just the viewport (boolean).
- Défilement pour Page Complète Simulate scrolling to load lazy-loaded content when capturing full page (boolean).
- Délai (secondes) Delay in seconds before taking the screenshot.
- Attendre jusqu'à l'événement Navigation event to wait for before capture: Load, Network Idle 0, or Network Idle 2.
- Attendre le sélecteur Wait until the specified CSS selector appears in the DOM before capturing.
- Bloquer les bannières de cookies Attempt to block cookie consent banners (boolean).
- Bloquer les publicités Attempt to block advertisements (boolean).
- Bloquer les chats Attempt to block chat widgets (boolean).
- Bloquer les bannières Attempt to block banners using heuristics (boolean).
- Bloquer les trackers Attempt to block tracking scripts (boolean).
- Masquer les sélecteurs JSON array of CSS selectors to hide before capture (e.g., ["#popup", ".header"]).
- Cliquer sur le sélecteur Click on the element matching this CSS selector before capture.
- User Agent Custom user agent string for the request.
- Headers JSON array of HTTP headers to send with the request (e.g., [{"name": "X-Custom-Header", "value": "Value"}]).
- Largeur du Viewport (px) Browser viewport width in pixels (default 1920).
- Hauteur du Viewport (px) Browser viewport height in pixels (default 1080).
- Facteur d'échelle du périphérique Device scale factor, e.g., 2 for Retina displays.
- Mode Sombre Enable dark mode on the page (boolean).
- Mouvement Réduit Enable reduced motion mode (boolean).
- Qualité (pour JPEG/WebP) Image quality for JPEG and WebP formats (1-100).
- Styles CSS personnalisés Custom CSS styles to inject into the page before capture.
- Format de réponse Response format: Base64 returns the image encoded in Base64; JSON returns a JSON object with the image URL and metadata.

Output

The node outputs one item per input with the following structure:

  • If response format is Base64 (default):

    • json contains all original input data merged with:
      • imageData: A data URI string containing the image encoded in Base64, e.g., "data:image/png;base64,iVBORw0...".
      • format: The image format used (png, jpeg, webp, or pdf).
    • binary is empty.

  • If response format is JSON:

    • json contains the original input data merged with the full JSON response from the API, which includes the image URL and other metadata.
    • binary is empty.

No binary data is output directly; images are embedded as Base64 strings or referenced via URLs.

Dependencies

  • Requires an API key credential for the One Screenshot API.
  • Makes HTTP POST requests to https://api.screenshotone.com/take.
  • No additional environment variables or external services are required beyond the API key.

Troubleshooting

  • Missing API Key: If no API key is provided in credentials, the node throws an error indicating that no API key was found.
  • Invalid JSON Fields:
    • The "Masquer les sélecteurs" field must be a valid JSON array; otherwise, an error is thrown.
    • The "Headers" field must be a valid JSON array of objects with name and value; otherwise, an error is thrown.
  • API Errors: The node tries multiple API keys if provided. If all fail, it throws the last error message received.
  • Unsupported Quality Option: The quality option is only applied for JPEG and WebP formats; it is ignored for PNG and PDF.
  • Incorrect Selector Usage: If the CSS selectors for capture, hiding, or clicking are invalid or do not match any elements, the resulting image may not be as expected.
  • Delays and Waiting: Setting too short delays or incorrect wait conditions might cause incomplete page rendering before capture.

To resolve errors:

  • Ensure the API key is correctly set.
  • Validate JSON inputs for selectors and headers.
  • Adjust delay and wait options to allow full page load.
  • Check CSS selectors for correctness.

Links and References

Discussion