← Browser Run / browser-run / quick-actions

/screenshot - Zachycení snímku obrazovky

/screenshot endpoint vykreslí webovou stránku zpracováním jejího HTML a JavaScriptu a poté pořídí snímek obrazovky plně vykreslené stránky.

Tento koncový bod můžete použít dvěma způsoby:

• REST API: Vytvořte vlastní API Token hodnotou Browser Rendering - Edit oprávnění.
• Workers Bindings: Volejte endpoint přímo z Cloudflare Worker pomocí Workers Bindings. Není potřeba žádný API token.

Další informace najdete v tématu Quick Actions: Než začnete.

https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot

Musíte zadat buď url nebo html:

• url (řetězec)
• html (řetězec)

• Generování náhledů webů, dashboardů nebo sestav
• Pořizujte snímky obrazovky pro automatizované testování, QA nebo vizuální regresní testy

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "html": "Hello World!",
    "screenshotOptions": {
      "omitBackground": true
    }
  }' \
  --output "screenshot.png"

import Cloudflare from "cloudflare";

const client = new Cloudflare({
	apiToken: process.env["CLOUDFLARE_API_TOKEN"],
});

const screenshot = await client.browserRendering.screenshot.create({
	account_id: process.env["CLOUDFLARE_ACCOUNT_ID"],
	html: "Hello World!",
	screenshotOptions: {
		omitBackground: true,
	},
});

console.log(screenshot.status);

interface Env {
	BROWSER: BrowserRun;
}

export default {
	async fetch(request, env): Promise<Response> {
		return await env.BROWSER.quickAction("screenshot", {
			html: "Hello World!",
			screenshotOptions: {
				omitBackground: true,
			},
		});
	},
} satisfies ExportedHandler<Env>;

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com"
  }' \
  --output "screenshot.png"

Další možnosti řízení výsledného snímku obrazovky, například clip, captureBeyondViewport, fullPage a další, zkontrolujte koncový bod reference.

Některé webové stránky vyžadují před zobrazením obsahu ověření. Browser Run podporuje tři metody ověřování, které fungují napříč všemi Rychlé akce endpointy. Rychlý přehled všech metod najdete v Jak mohu vykreslit ověřené stránky pomocí Quick Actions?.

Chcete-li získat přístup ke stránkám, které vyžadují přihlášení, zadejte platné soubory cookie relace:

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/protected-page",
    "cookies": [
      {
        "name": "session_id",
        "value": "your-session-cookie-value",
        "domain": "example.com",
        "path": "/"
      }
    ]
  }' \
  --output "authenticated-screenshot.png"

Použijte authenticate parametr pro stránky chráněné pomocí HTTP Basic Authentication:

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/protected-page",
    "authenticate": {
      "username": "user",
      "password": "pass"
    }
  }' \
  --output "authenticated-screenshot.png"

Přidejte vlastní autorizační hlavičky pomocí setExtraHTTPHeaders:

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/protected-page",
    "setExtraHTTPHeaders": {
      "Authorization": "Bearer your-token"
    }
  }' \
  --output "authenticated-screenshot.png"

Přejděte na https://cloudflare.com/, změňte velikost stránky (viewport) a počkejte, dokud nebudou žádná aktivní síťová připojení (waitUntil) nebo maximálně 4500ms (timeout) před zachycením fullPage snímek obrazovky.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://cloudflare.com/",
    "screenshotOptions": {
       "fullPage": true
    },
    "viewport": {
      "width": 1280,
      "height": 720
    },
    "gotoOptions": {
      "waitUntil": "networkidle0",
      "timeout": 45000
    }
  }' \
  --output "advanced-screenshot.png"

Pokud nastavíte velkou šířku a výšku viewportu, může snímek obrazovky vypadat rozmazaně nebo pixelovaně. K tomu může dojít, pokud výchozí deviceScaleFactor (výchozí hodnota je 1) není dostatečně vysoká pro viewport.

Chcete-li to opravit, zvyšte hodnotu deviceScaleFactor.

{
  "url": "https://cloudflare.com/",
  "viewport": {
    "width": 3600,
    "height": 2400,
    "deviceScaleFactor": 2
  }
}

Nechte prohlížeč přejít na https://example.com, vložte vlastní JavaScript (addScriptTag) a přidejte další styly (addStyleTag), a to jak vložené (addStyleTag.content) a načtením externího stylopisu (addStyleTag.url).

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "addScriptTag": [
      { "content": "document.querySelector(`h1`).innerText = `Hello World!!!`" }
    ],
    "addStyleTag": [
      {
        "content": "div { background: linear-gradient(45deg, #2980b9  , #82e0aa  ); }"
      },
      {
        "url": "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      }
    ]
  }' \
  --output "screenshot.png"

Chcete-li pořídit snímek obrazovky konkrétního prvku na webové stránce, použijte selector s platným selektorem CSS. Můžete také nastavit viewport k řízení rozměrů stránky během vykreslování.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/screenshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com",
    "selector": "#example_element_name",
    "viewport": {
      "width": 1200,
      "height": 1600
    }
  }' \
  --output "screenshot.png"

K dispozici je mnohem více možností, například nastavení přihlašovacích údajů HTTP pomocí authenticate, nastavením cookies, a pomocí gotoOptions k řízení chování při načítání stránky, ověřte koncový bod reference pro všechny dostupné parametry.

U stránek s velkým množstvím JavaScriptu nebo jednostránkových aplikací (SPA) může výchozí chování při načítání stránky vracet prázdné nebo neúplné výsledky. Je to dáno tím, že prohlížeč považuje stránku za načtenou dříve, než JavaScript dokončí vykreslení obsahu.

Nejjednodušším řešením je použít gotoOptions.waitUntil parametr nastavený na networkidle0 nebo networkidle2:

{
	"url": "https://example.com",
	"gotoOptions": {
		"waitUntil": "networkidle0"
	}
}

Pro rychlejší odezvu mohou pokročilí uživatelé použít waitForSelector k čekání na konkrétní prvek namísto čekání na zastavení veškeré síťové aktivity. To vyžaduje znalost, který CSS selektor signalizuje, že se požadovaný obsah načetl. Další podrobnosti najdete v Časové limity Quick Actions.

User agent můžete změnit na úrovni stránky předáním userAgent jako parametr nejvyšší úrovně v těle JSON. To je užitečné, pokud cílový web zobrazuje různý obsah podle uživatelského agenta.

Pokud máte dotazy nebo narazíte na chybu, podívejte se na Časté dotazy a průvodce řešením problémů Browser Run.