跳转到内容
搜索文档

使用 Workers 优化

最后更新 查看 MarkdownAgent 设置

绑定(binding) 将您的 Worker 连接到 Developer Platform 上的外部资源,如 ImagesR2 存储桶KV 命名空间

Images 绑定让您直接在 Worker 中优化和处理图像。与需要图像通过 URL 可访问的 URL 接口 不同,绑定使用原始图像字节。您可以从任何源传递图像,包括 ImagesR2fetch() 响应或请求体。

使用 Images 绑定,您可以:

  • 通过直接传递字节优化存储在 Images 或 R2 中的图像,而不是通过公共 URL 获取。
  • 调整图像大小、叠加水印,然后将组合输出调整为最终结果——全部在单个操作链中完成。
  • 控制优化参数的操作顺序。使用 URL 接口时,优化参数遵循固定的操作顺序。

绑定可以在 Cloudflare 仪表板中为 Worker 配置,或在项目目录的 Wrangler 配置文件中配置。

设置

Images 绑定按 Worker 启用。

您可以在 Worker 项目目录的 Wrangler 配置文件中定义变量。这些变量在运行时绑定到外部资源,然后您可以通过此变量与它们交互。

要将 Images 绑定到 Worker,请在 Wrangler 配置文件末尾添加以下内容:

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

在 Worker 代码中,使用 env.IMAGES.input() 构建可以操作图像的对象(作为 ReadableStream 传递)。

方法

.input(stream)

为图像创建优化句柄。所有操作都从此方法开始。接受来自任何源(包括 ImagesR2fetch() 响应或请求体)的最多 20 MB 图像字节。

返回可用于链式调用 .transform().draw().output() 的句柄。

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();
	},
};

.transform(options)

对图像应用优化参数,如 widthheightblur。您可以链式调用多个 .transform() 来控制参数应用的顺序。

有关参数的完整列表,请参阅功能

以下示例展示如何通过获取图像字节来调整存储在 Images 中的图像大小:

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

.draw(image, options)

在另一张图像上绘制叠加图像。

叠加可以是图像字节流或另一个 .input() 链。您可以在此方法内传递子 .transform() 函数,在绘制之前调整或处理叠加图像。

接受 opacityrepeat、边(leftrighttopbottom)和 composite。有关完整的绘制选项和示例,请参阅绘制叠加和水印

.output(options)

使用指定的输出选项生成最终图像。

接受以下选项:

  • format — 以支持的格式(如 AVIF、WebP 或 JPEG)编码图像。此方法是必需的——没有默认输出格式。
  • quality — 指定 JPEG、WebP 和 AVIF 格式的输出质量,以固定值或感知质量级别表示。
  • anim — 指定是否保留动画帧。设置 anim:false 将动画转换为静态图像。
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;

.info(stream)

输出有关图像的信息,如 formatfileSizewidthheight

在本地与 Images 绑定交互

Images API 可以通过 Wrangler(Workers 的命令行界面)在本地开发中使用。在本地开发中使用 Images 绑定不会产生使用费用。

Wrangler 支持两个不同版本的 Images API:

  • 支持 Images API 所有可用功能的高保真版本。这与 Cloudflare 在全球生产环境中运行的版本相同。
  • 仅支持部分功能(如调整大小和旋转)的低保真离线版本。

要测试 Images 的低保真版本,您可以运行 wrangler dev

npx wrangler dev

目前,此版本仅支持 widthheightrotateformat

要测试 Images 的高保真远程版本,您可以使用 --remote 标志:

npx wrangler dev --remote

使用 Workers Vitest 集成 测试时,默认使用低保真离线版本,以避免在测试中调用 Cloudflare API。

这篇文档对您有帮助吗?