如何在Cloudflare Worker中用Denoflare和Wasm Photon实现图片缩放？

一、适配Cloudflare Worker的Photon版本说明 #

官方Photon的Node.js版本依赖fs、path等Node.js核心模块，无法直接在Cloudflare Worker环境运行。你需要使用Photon的WebAssembly浏览器版（photon-wasm），这个版本完全适配无文件系统的环境，仅依赖Web标准API。

二、最小实现示例（Cloudflare Worker + R2 + Photon WASM） #

步骤1：初始化项目并安装依赖 #

在项目目录执行命令：

npm init -y
npm install photon-wasm

步骤2：Worker核心代码（TypeScript） #

import { Photon } from 'photon-wasm';

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    // 从R2获取原始图片（确保R2绑定名为MY_BUCKET）
    const url = new URL(request.url);
    const imageKey = url.pathname.slice(1); // 移除路径开头的斜杠
    const object = await env.MY_BUCKET.get(imageKey);
    if (!object) return new Response('图片不存在', { status: 404 });

    // 将R2对象转为ArrayBuffer
    const imageBuffer = await object.arrayBuffer();

    // 初始化Photon并处理图片
    const photon = await Photon.load();
    const inputImage = photon.open_image_from_bytes(new Uint8Array(imageBuffer));
    
    // 缩放到宽度200px，高度按比例自动计算
    const resizedImage = inputImage.resize(200, 0);
    
    // 导出为质量80的JPEG
    const outputBytes = resizedImage.save_jpeg(80);

    // 返回处理后的图片
    return new Response(outputBytes, {
      headers: {
        'Content-Type': 'image/jpeg',
        'Cache-Control': 'public, max-age=31536000',
      },
    });
  },
};

// TypeScript类型定义：声明R2绑定
interface Env {
  MY_BUCKET: R2Bucket;
}

步骤3：部署配置 #

• 在Cloudflare控制台给Worker绑定你的R2存储桶，绑定名必须和代码中的MY_BUCKET一致
• 部署Worker后，访问https://你的Worker域名/你的图片文件名.jpg即可获取缩略图

三、替代方案（无需Photon） #

如果觉得Photon学习成本高，可使用sharp-wasm（Sharp的WebAssembly版本），API更直观：

import sharp from 'sharp';

export default {
  async fetch(request: Request, env: Env) {
    const imageKey = new URL(request.url).pathname.slice(1);
    const object = await env.MY_BUCKET.get(imageKey);
    if (!object) return new Response('图片不存在', { status: 404 });
    
    const buffer = await object.arrayBuffer();
    const resizedBuffer = await sharp(buffer).resize(200).toBuffer();
    
    return new Response(resizedBuffer, {
      headers: { 'Content-Type': 'image/jpeg' },
    });
  },
};

内容的提问来源于stack exchange，提问作者Suragch