绑定(binding) 将您的 Worker 连接到 Developer Platform 上的外部资源,如 Images、R2 存储桶 或 KV 命名空间。
Images 绑定让您直接在 Worker 中优化和处理图像。与需要图像通过 URL 可访问的 URL 接口 不同,绑定使用原始图像字节。您可以从任何源传递图像,包括 Images、R2、fetch() 响应或请求体。
使用 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 传递)。
为图像创建优化句柄。所有操作都从此方法开始。接受来自任何源(包括 Images、R2、fetch() 响应或请求体)的最多 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();
},
};对图像应用优化参数,如 width、height 或 blur。您可以链式调用多个 .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;在另一张图像上绘制叠加图像。
叠加可以是图像字节流或另一个 .input() 链。您可以在此方法内传递子 .transform() 函数,在绘制之前调整或处理叠加图像。
接受 opacity、repeat、边(left、right、top、bottom)和 composite。有关完整的绘制选项和示例,请参阅绘制叠加和水印。
使用指定的输出选项生成最终图像。
接受以下选项:
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;输出有关图像的信息,如 format、fileSize、width 和 height。
Images API 可以通过 Wrangler(Workers 的命令行界面)在本地开发中使用。在本地开发中使用 Images 绑定不会产生使用费用。
Wrangler 支持两个不同版本的 Images API:
- 支持 Images API 所有可用功能的高保真版本。这与 Cloudflare 在全球生产环境中运行的版本相同。
- 仅支持部分功能(如调整大小和旋转)的低保真离线版本。
要测试 Images 的低保真版本,您可以运行 wrangler dev:
npx wrangler dev目前,此版本仅支持 width、height、rotate 和 format。
要测试 Images 的高保真远程版本,您可以使用 --remote 标志:
npx wrangler dev --remote使用 Workers Vitest 集成 测试时,默认使用低保真离线版本,以避免在测试中调用 Cloudflare API。