← Images / images / optimization

Optimalizace pomocí Workers

A binding propojuje váš Worker na externí zdroje na Developer Platform, například Obrázky, R2 buckety, nebo KV namespaces.

Binding Images umožňuje optimalizovat a upravovat obrázky přímo ve Workeru. Na rozdíl od Rozhraní URL, které vyžaduje, aby byly obrázky dostupné přes URL, binding pracuje přímo s bajty obrázku. Obrázky můžete předávat z libovolného zdroje, včetně Obrázky, R2, fetch() odpověď nebo tělo požadavku.

Pomocí vazby Images můžete:

• Optimalizujte obrázek uložený v Images nebo R2 přímým předáním bajtů, místo načítání přes veřejnou adresu URL.
• Změňte velikost obrázku, přidejte vodoznak a poté změňte velikost výsledného obrázku na finální výstup, to vše v jediném řetězci operací.
• Řízení pořadí operací pro parametry optimalizace. Při použití rozhraní URL dodržují parametry optimalizace pevně dané pořadí operací.

Bindings lze nakonfigurovat v Cloudflare dashboardu pro váš Worker nebo v konfiguračním souboru Wrangler v adresáři vašeho projektu.

Binding Images se aktivuje na úrovni jednotlivého Workeru.

Proměnné můžete definovat v konfiguračním souboru Wrangler v adresáři projektu vašeho Workeru. Tyto proměnné jsou za běhu navázány na externí prostředky a následně s nimi můžete pracovat prostřednictvím dané proměnné.

Chcete-li Images svázat s Workerem, přidejte následující na konec konfiguračního souboru Wrangler:

{
	"images": {
		"binding": "IMAGES", // i.e. available in your Worker on env.IMAGES
	},
}

[images]
binding = "IMAGES"

V kódu Workeru použijte env.IMAGES.input() k vytvoření objektu, který dokáže obrázek upravovat (předaného jako ReadableStream).

Vytvoří handle pro optimalizaci obrázku. Všemi operacemi se začíná touto metodou. Přijímá bajty obrázku do velikosti 20 MB z libovolného zdroje, včetně Obrázky, R2, fetch() odpověď nebo tělo požadavku.

Vrátí popisovač (handle), který můžete použít k řetězení .transform(), .draw(), a .output() volání.

export default {
	async fetch(request, env) {
		const imageURL = "https://example.com/photo.jpg";

		const response = await fetch(imageURL);

		return (
			await env.IMAGES.input(response.body)
				.transform({ width: 800 })
				.output({ format: "image/webp" })
		).response();
	},
};

export default {
	async fetch(request, env) {
		const imageURL = "https://example.com/photo.jpg";

		const response = await fetch(imageURL);

		return (
			await env.IMAGES
				.input(response.body)
				.transform({ width: 800 })
				.output({ format: "image/webp" })
		).response();
	},
};

Použije na obrázek optimalizační parametry, například width, height, nebo blur. Můžete zřetězit více .transform() volání, abyste určili pořadí, ve kterém se parametry použijí.

Úplný seznam parametrů najdete v Funkce.

Následující příklad ukazuje, jak lze změnit velikost obrázku, který má uložené v Images získáním bajtů obrázku:

// Get the raw bytes of a hosted image
const bytes = await env.IMAGES.hosted.image("IMAGE_ID").bytes();

// Resize and transcode the image
const response = (
	await env.IMAGES.input(bytes)
		.transform({ width: 400 })
		.output({ format: "image/webp" })
).response();

return response;

// Get the raw bytes of a hosted image
const bytes = await env.IMAGES.hosted.image("IMAGE_ID").bytes();

// Resize and transcode the image
const response = (
  await env.IMAGES.input(bytes)
    .transform({ width: 400 })
    .output({ format: "image/webp" })
).response();

return response;

Vykreslí obrázek překryvu na jiný obrázek.

Překryvná vrstva může být proud bajtů obrázku nebo další .input() řetězec. Můžete předat podřízený .transform() funkci uvnitř této metody ke změně velikosti nebo úpravě překryvu před jeho vykreslením.

Přijímá opacity, repeat, strana (left, right, top, bottom), a composite. Úplný seznam možností kreslení a příklady najdete v Kreslení překryvů a vodoznaků.

Vygeneruje konečný obrázek se zadanými možnostmi výstupu.

Přijímá následující možnosti:

• format : Zakóduje obrázek ve formátu podporovaný formát, jako je AVIF, WebP nebo JPEG. Tato metoda je povinná, protože výchozí výstupní formát neexistuje.
• quality : Určuje výstupní kvalita obrázku pro formáty JPEG, WebP a AVIF, vyjádřenou jako pevnou hodnotu nebo úroveň percepční kvality.
• anim : Určuje, zda zachovat snímky animace ze vstupních souborů. Nastavte anim:false pro převod animací na statické obrázky.

const response = (
	await env.IMAGES.input(stream)
		.transform({ rotate: 90 })
		.transform({ width: 128 })
		.transform({ blur: 20 })
		.output({ format: "image/avif" })
).response();

return response;

const response = (
	await env.IMAGES.input(stream)
		.transform({ rotate: 90 })
		.transform({ width: 128 })
		.transform({ blur: 20 })
		.output({ format: "image/avif" })
).response();

return response;

Zobrazuje informace o obrázku, jako jsou format, fileSize, width, a height.

Images API lze v místním vývojovém prostředí použít prostřednictvím Wrangler, rozhraní příkazové řádky pro Workers. Použití Images bindingu při lokálním vývoji nebude zpoplatněno.

Wrangler podporuje dvě různé verze Images API:

• Plnohodnotná verze, která podporuje všechny funkce dostupné prostřednictvím Images API. Jde o stejnou verzi, kterou Cloudflare globálně provozuje v produkčním prostředí.
• Zjednodušená offline verze, která podporuje jen část funkcí, například změnu velikosti a otočení.

Chcete-li otestovat verzi Images s nižší věrností, můžete spustit wrangler dev:

npx wrangler dev

Tato verze v současné době podporuje pouze width, height, rotate, a format.

Chcete-li otestovat vysoce věrnou vzdálenou verzi Images, můžete použít --remote příznak:

npx wrangler dev --remote

Při testování pomocí Integrace Vitest pro Workers, ve výchozím stavu se používá offline verze s nižší věrností, aby se v testech nevolalo Cloudflare API.