Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

透かし

KV から取得した透かしを、R2 の画像に重ねます

最終更新 Markdown で表示Agent セットアップ

同じ透かし付き画像への繰り返しリクエストが、Worker の再実行や画像の再変換なしにキャッシュから返るように、Workers Cache を有効にします。

{
	"cache": {
		"enabled": true,
	},
}
[cache]
enabled = true

続いて、レスポンスに Cache-Control ヘッダーを設定して、キャッシュの有効期間を制御します。

export default {
	async fetch(request, env) {
		const watermarkKey = "my-watermark";
		const sourceKey = "my-source-image";

		const watermark = await env.NAMESPACE.get(watermarkKey, "stream");
		const source = await env.BUCKET.get(sourceKey);

		if (!watermark || !source) {
			return new Response("Not found", { status: 404 });
		}

		const result = await env.IMAGES.input(source.body)
			.draw(watermark)
			.output({ format: "image/jpeg" });

		const response = result.response();

		return new Response(response.body, {
			headers: {
				...Object.fromEntries(response.headers),
				"Cache-Control": "public, max-age=3600, stale-while-revalidate=86400",
			},
		});
	},
};
interface Env {
	BUCKET: R2Bucket;
	NAMESPACE: KVNamespace;
	IMAGES: ImagesBinding;
}
export default {
	async fetch(request, env): Promise<Response> {
		const watermarkKey = "my-watermark";
		const sourceKey = "my-source-image";

		const watermark = await env.NAMESPACE.get(watermarkKey, "stream");
		const source = await env.BUCKET.get(sourceKey);

		if (!watermark || !source) {
			return new Response("Not found", { status: 404 });
		}

		const result = await env.IMAGES.input(source.body)
			.draw(watermark)
			.output({ format: "image/jpeg" });

		const response = result.response();

		return new Response(response.body, {
			headers: {
				...Object.fromEntries(response.headers),
				"Cache-Control": "public, max-age=3600, stale-while-revalidate=86400",
			},
		});
	},
} satisfies ExportedHandler<Env>;

役に立ちましたか?