Worker からアップロードする

Worker を使って、画像を Cloudflare Images にアップロードできます。

次の例を参照するか、詳細は Workers のドキュメントを参照してください。

const API_URL =
	"https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1";
const TOKEN = "<YOUR_TOKEN_HERE>";

const image = await fetch("https://example.com/image.png");
const bytes = await image.bytes();

const formData = new FormData();
formData.append("file", new File([bytes], "image.png"));

const response = await fetch(API_URL, {
	method: "POST",
	headers: {
		Authorization: `Bearer ${TOKEN}`,
	},
	body: formData,
});

const API_URL =
	"https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1";
const TOKEN = "<YOUR_TOKEN_HERE>";

const image = await fetch("https://example.com/image.png");
const bytes = await image.bytes();

const formData = new FormData();
formData.append("file", new File([bytes], "image.png"));

const response = await fetch(API_URL, {
	method: "POST",
	headers: {
		Authorization: `Bearer ${TOKEN}`,
	},
	body: formData,
});

AI 生成画像をアップロードする

AI Worker で画像を生成し、その画像を Cloudflare Images に保存できます。Workers AI で画像を生成する方法の詳細は、SDXL-Lightning Model を参照してください。

const API_URL =
	"https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1";
const TOKEN = "YOUR_TOKEN_HERE";

const stream = await env.AI.run("@cf/bytedance/stable-diffusion-xl-lightning", {
	prompt: YOUR_PROMPT_HERE,
});
const bytes = await new Response(stream).bytes();

const formData = new FormData();
formData.append("file", new File([bytes], "image.jpg"));

const response = await fetch(API_URL, {
	method: "POST",
	headers: {
		Authorization: `Bearer ${TOKEN}`,
	},
	body: formData,
});

const API_URL =
	"https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1";
const TOKEN = "YOUR_TOKEN_HERE";

const stream = await env.AI.run("@cf/bytedance/stable-diffusion-xl-lightning", {
	prompt: YOUR_PROMPT_HERE,
});
const bytes = await new Response(stream).bytes();

const formData = new FormData();
formData.append("file", new File([bytes], "image.jpg"));

const response = await fetch(API_URL, {
	method: "POST",
	headers: {
		Authorization: `Bearer ${TOKEN}`,
	},
	body: formData,
});