← Browser Run / browser-run / quick-actions

/snapshot - Zachycení více formátů stránky

Browser Run poskytuje jednotlivé koncové body pro HTML obsah, snímky obrazovky, Markdown, a další. /snapshot endpoint kombinuje více formátů do jediného požadavku, takže není nutné volat každý endpoint zvlášť. Ve výchozím nastavení vrací obsah HTML a snímek obrazovky. Můžete použít formats parametr, kterým lze určit zahrnuté formáty, například přidat do odpovědi Markdown a strom přístupnosti.

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/snapshot

Musíte zadat buď url nebo html:

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

• V jediném volání API zachyťte vykreslené HTML i vizuální snímek obrazovky
• Archivujte stránky spolu s vizuálními a strukturálními daty
• Vytvářejte monitorovací nástroje, které v průběhu času porovnávají vizuální rozdíly a rozdíly v DOM

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/snapshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "addScriptTag": [
      { "content": "document.body.innerHTML = \"Snapshot Page\";" }
    ]
  }'

{
	"success": true,
	"result": {
		"screenshot": "Base64EncodedScreenshotString",
		"content": "<html>...</html>"
	}
}

import Cloudflare from "cloudflare";

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

const snapshot = await client.browserRendering.snapshot.create({
	account_id: process.env["CLOUDFLARE_ACCOUNT_ID"],
	url: "https://example.com/",
	addScriptTag: [{ content: 'document.body.innerHTML = "Snapshot Page";' }],
});

console.log(snapshot.content);

interface Env {
	BROWSER: BrowserRun;
}

export default {
	async fetch(request, env): Promise<Response> {
		return await env.BROWSER.quickAction("snapshot", {
			url: "https://example.com/",
			addScriptTag: [{ content: 'document.body.innerHTML = "Snapshot Page";' }],
		});
	},
} satisfies ExportedHandler<Env>;

Tento příklad používá html vlastnost pro vykreslení <html><body>Advanced Snapshot</body></html> a provádí následující:

1. Vypněte JavaScript.
2. Nastaví snímek obrazovky na fullPage.
3. Změní velikost stránky (viewport).
4. Čeká až 30000ms nebo dokud DOMContentLoaded událost se spustí.
5. Vrátí vykreslený obsah HTML a snímek obrazovky stránky zakódovaný v base64.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/snapshot' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "html": "<html><body>Advanced Snapshot</body></html>",
    "setJavaScriptEnabled": false,
    "screenshotOptions": {
       "fullPage": true
    },
    "viewport": {
      "width": 1200,
      "height": 800
    },
    "gotoOptions": {
      "waitUntil": "domcontentloaded",
      "timeout": 30000
    }
  }'

{
	"success": true,
	"result": {
		"screenshot": "Base64EncodedScreenshotString",
		"content": "<html><body>Advanced Snapshot</body></html>"
	}
}

Použijte formats parametr pro řízení toho, jaké reprezentace stránky se zahrnou do odpovědi. Přijímané hodnoty jsou "content", "screenshot", "markdown", a "accessibilityTree". Pokud je vynechán, výchozí hodnota je ["content", "screenshot"].

Musíte vyžádat alespoň dva formáty. Pokud potřebujete pouze jeden formát, použijte místo toho odpovídající koncový bod pro jediný formát: /content, /screenshot, /markdown, nebo /accessibilityTree.

Následující příklad v jednom volání vyžádá snímek obrazovky, Markdown a strom přístupnosti:

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

{
	"success": true,
	"result": {
		"accessibilityTree": {
			"role": "RootWebArea",
			"name": "Example Domain",
			"children": [
				{
					"role": "heading",
					"name": "Example Domain",
					"level": 1
				},
				{
					"role": "StaticText",
					"name": "This domain is for use in documentation examples without needing permission. Avoid use in operations."
				},
				{
					"role": "link",
					"name": "Learn more"
				}
			]
		},
		"screenshot": "iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAIAAAB...",
		"markdown": "# Example Domain\n\nThis domain is for use in documentation examples without needing permission. Avoid use in operations.\n\n[Learn more](https://iana.org/domains/example)"
	},
	"meta": {
		"status": 200,
		"title": "Example Domain"
	}
}

import Cloudflare from "cloudflare";

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

const snapshot = await client.browserRendering.snapshot.create({
	account_id: process.env["CLOUDFLARE_ACCOUNT_ID"],
	url: "https://example.com/",
	formats: ["screenshot", "markdown", "accessibilityTree"],
});

console.log(snapshot.markdown);
console.log(snapshot.accessibilityTree);

interface Env {
	BROWSER: BrowserRun;
}

export default {
	async fetch(request, env): Promise<Response> {
		return await env.BROWSER.quickAction("snapshot", {
			url: "https://example.com/",
			formats: ["screenshot", "markdown", "accessibilityTree"],
		});
	},
} satisfies ExportedHandler<Env>;

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
  }
}

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.