← Images / images / optimization / transformations

Kreslení překryvů a vodoznaků

Použijte Workers ke kreslení vodoznaků, log a podpisů přes jiné obrázky. Překryvy podporují průhlednost, umístění a režimy kompozice.

Překryvné vrstvy (overlays) můžete ve Workeru vykreslit dvěma způsoby:

• cf.image u subrequestu fetch : Přidejte draw pole do možností obrázku. Všechny obrázky musí být dostupné přes URL. Tento postup použijte při optimalizaci obrázků prostřednictvím Rozhraní URL.
• Vazba Images binding : Zřetězte .draw() volání při překrývání obrázků z jakéhokoli zdroje, včetně hostované obrázky nebo R2.

Chcete-li vykreslit překryvné vrstvy na fetch() dílčí požadavek ve Workers můžete přidat draw pole do cf.image možnosti.

Každá položka v poli určuje jeden překryv a jeho možnosti, včetně parametry optimalizace jako width, height, fit, blur, a rotate. Překryvy se vykreslují v pořadí, v jakém jsou uvedeny: poslední položka tvoří nejvyšší vrstvu.

export default {
	async fetch(request) {
		const imageURL = "https://example.com/image.png";

		return fetch(imageURL, {
			cf: {
				image: {
					width: 800,
					height: 600,
					draw: [
						{
							url: "https://example.com/branding/logo.png",
							bottom: 5,
							right: 5,
							fit: "contain",
							width: 100,
							height: 50,
							opacity: 0.8,
						},
					],
				},
			},
		});
	},
};

Vazba Images binding používá řetězitelné .draw() k vykreslení překryvné vrstvy nad obrázkem. Můžete zřetězit více .draw() volání pro více překryvů.

Předejte obrázek překryvu jako první argument a možnosti kreslení jako druhý. Chcete-li použít parametry optimalizace k překryvnému obrázku předejte .input() řetězec s .transform() jako první argument.

export default {
	async fetch(request, env) {
		const img = await fetch("https://zzzdna.com/blue.png");
		const watermark = await fetch("https://zzzdna.com/purple.png");

		const response = (
			await env.IMAGES
				.input(img.body)
				.draw(
					env.IMAGES.input(watermark.body).transform({ width: 100 }),
					{ bottom: 10, right: 10, opacity: 0.5 }
				)
				.output({ format: "image/avif" })
		).response();

		return response;
	},
};

Rozměry výstupního obrázku vždy určuje základní obrázek. Překryv se poté vykreslí do plátna základního obrázku.

Následující možnosti specifické pro kreslení (draw) lze použít pro polohování a prolínání.

Absolutní adresa URL překryvného obrázku při kreslení pomocí cf.image. Podporuje libovolný podporovaný formát obrázku. Pro vodoznaky nebo nepravoúhlé překryvy použijte obrázky PNG nebo WebP.

Při kreslení pomocí vazby Images se překryvný obrázek předává jako bajty obrázku nebo .input() řetězec namísto adresy URL. Více informací najdete v Kreslení pomocí Images binding.

Nastaví maximální rozměry překryvného obrázku při kreslení pomocí cf.image. Přijímá celé číslo (v pixelech) nebo desetinné číslo mezi 0 a 1 představující zlomek rozměru základního obrázku. Například height:0.25 nastaví výšku překryvu na 25% výšky základního obrázku.

Použijte fit a gravity pro řízení změny velikosti a oříznutí překryvného obrázku.

Při kreslení pomocí vazby Images lze rozměry překryvného obrázku nastavit pomocí .transform() metoda.

Určuje, zda se překryv po obrázku opakuje jako dlaždice.

Přijímá následující hodnoty:

• true : Vydláždí překryvnou vrstvu tak, aby pokryla celou plochu. To se hodí například pro vodoznaky.
• x : Vydláždí překryvnou vrstvu pouze vodorovně.
• y : Vydláždí překryvnou vrstvu pouze svisle.

Nastaví polohu překryvného obrázku jako posun v pixelech od zadané hrany. 0 zarovná překrytí těsně k okraji. Pokud není zadaná žádná pozice, překrytí se vycentruje.

Například { bottom: 0, right: 10 } umístí překryvnou vrstvu do pravého dolního rohu, 10 pixelů od pravého okraje.

Nastavení obou left a right, nebo obojí top a bottom vrátí chybu.

Nastaví neprůhlednost překryvného obrázku. Přijímá desetinnou hodnotu mezi 0.0 (zcela průhledné) a 1.0 (zcela neprůhledné). Například opacity: 0.5 způsobí, že překryvná vrstva bude poloprůhledná.

Určuje, jak se překryv prolíná se základním obrázkem pomocí Kompozitní operace Porter-Duff ↗. Výchozí hodnota je over.

Režim kompozice ovlivňuje pouze oblast v rámci ohraničující oblasti překryvu. Mimo tuto oblast zůstává základní obrázek vždy zachován beze změny.

Přijímá následující hodnoty:

Vykreslí obrázek překryvu na základní obrázek. Toto je výchozí composite chování.

Překryvná vrstva zakrývá základní obrázek v místech překryvu. Tam, kde se obrázky nepřekrývají, jsou viditelné oba.

Zobrazí překryv pouze tam, kde je základní obrázek neprůhledný. Pokud má překryv průhledné pixely, které se překrývají se základním obrázkem, stanou se průhlednými i tyto oblasti základního obrázku.

Vykreslí obrázek překryvu na základní obrázek, ale pouze v místech, kde je základní obrázek neprůhledný. Tím se obrázek překryvu ořeže do tvaru základního obrázku.

Pokud má překryvná vrstva průhledné pixely, které se překrývají se základním obrázkem, zůstává základní obrázek viditelný (na rozdíl od in).

Zobrazí překryv pouze tam, kde je základní obrázek průhledný. V rámci ohraničující oblasti překryvu se neprůhledné části základního obrázku stanou průhlednými.

Zobrazí oblasti každého obrázku tam, kde je druhý obrázek průhledný. Překrývající se neprůhledné oblasti se stanou průhlednými. Toto lze použít k vytvoření zaoblené rohy nebo vlastní tvary.

Sečte barevné hodnoty obou obrázků, díky čemuž jsou překrývající se oblasti světlejší.

Poloprůhledný vodoznak rozmístěte dlaždicově po celém obrázku pomocí cf.image.

fetch(imageURL, {
	cf: {
		image: {
			draw: [
				{
					url: "https://example.com/watermark.png",
					repeat: true,
					opacity: 0.2,
				},
			],
		},
	},
});

Umístěte logo do pravého dolního rohu pomocí cf.image.

fetch(imageURL, {
	cf: {
		image: {
			draw: [
				{
					url: "https://example.com/logo.png",
					bottom: 5,
					right: 5,
				},
			],
		},
	},
});

Zkombinujte více překryvů v jednom požadavku pomocí cf.image. Vykreslují se v pořadí: poslední položka tvoří nejvyšší vrstvu.

fetch(imageURL, {
	cf: {
		image: {
			draw: [
				{ url: "https://example.com/watermark.png", repeat: true, opacity: 0.2 },
				{ url: "https://example.com/play-button.png" },
				{ url: "https://example.com/logo.png", bottom: 5, right: 5 },
			],
		},
	},
});

Ořízne zaoblené rohy obrázku. V každém rohu se vykreslí maska rohu, otočená tak, aby odpovídala dané pozici. xor odstraní překrývající se pixely.

Následující příklad ukazuje, jak toho lze dosáhnout pomocí Vazba Images binding.

const image = await fetch("https://example.com/photo.png");
const mask = await fetch("https://example.com/corner-mask.png");

let [topLeft, topRight] = mask.body.tee();
let bottomLeft, bottomRight;
[topLeft, bottomLeft] = topLeft.tee();
[topLeft, bottomRight] = topLeft.tee();

const output = await env.IMAGES
	.input(image.body)
	.draw(env.IMAGES.input(topLeft).transform({ rotate: 0 }), {
		left: 0,
		top: 0,
		composite: "xor",
	})
	.draw(env.IMAGES.input(topRight).transform({ rotate: 90 }), {
		right: 0,
		top: 0,
		composite: "xor",
	})
	.draw(env.IMAGES.input(bottomRight).transform({ rotate: 180 }), {
		bottom: 0,
		right: 0,
		composite: "xor",
	})
	.draw(env.IMAGES.input(bottomLeft).transform({ rotate: 270 }), {
		bottom: 0,
		left: 0,
		composite: "xor",
	})
	.output({ format: "image/png" });

return output.response();