如何在Cloudflare Workers中使用Photon图像库生成缩略图？

我的最终目标是在Cloudflare Worker中生成缩略图，此前试过Denoflare搭配Photon，现在想简化流程，只聚焦Photon的使用（不限于调整大小，任何功能均可）。其他用户也遇到过相同问题。

以下是我已尝试的方案：

环境搭建 #

创建新的Cloudflare项目：

npm create cloudflare@latest

• 项目名称：example-worker
• 模板："Hello World" Worker
• 不使用TypeScript（采用JavaScript）
• 兼容日期：2023-05-18
• 暂不部署（仅本地测试）

使用photon npm包 #

搭建步骤：

npm install @silvia-odwyer/photon

替换src/index.js内容为：

import * as photon from '@silvia-odwyer/photon';

export default {
    async fetch(request, env, ctx) {
        const imageBytes = new Uint8Array([
            137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82,
            0, 0, 0, 1, 0, 0, 0, 1, 8, 2, 0, 0, 0, 144, 119, 83, 222,
            0, 0, 0, 1, 115, 82, 71, 66, 0, 174, 206, 28, 233, 0, 0, 0,
            4, 103, 65, 77, 65, 0, 0, 177, 142, 124, 251, 81, 147, 0, 0,
            0, 9, 112, 72, 89, 115, 0, 0, 14, 196, 0, 0, 14, 196, 1, 149,
            43, 14, 27, 0, 0, 0, 12, 73, 68, 65, 84, 8, 215, 99, 248, 207,
            240, 143, 0, 0, 2, 1, 1, 0, 226, 33, 60, 54, 0, 0, 0, 0,
            73, 69, 78, 68, 174, 66, 96, 130
          ]);
        const photonImage = new photon.PhotonImage(imageBytes, 1, 1);
        const result = photonImage.get_width;
        return new Response(`result: ${result}`);
    },
};

运行命令：

wrangler dev

报错信息：

TypeError: malloc is not a function

example-worker/node_modules/@silvia-odwyer/photon/photon_rs_bg.js:645:17

function passArray8ToWasm0(arg, malloc) {
    const ptr = malloc(arg.length * 1);  // <- 错误位置
    getUint8Memory0().set(arg, ptr / 1);
    WASM_VECTOR_LEN = arg.length;
    return ptr;
}

使用photon-node npm包 #

搭建步骤：

npm install @silvia-odwyer/photon-node

在wrangler.toml中添加node_compat = true：

name = "example-worker"
main = "src/index.js"
compatibility_date = "2023-05-18"
node_compat = true

替换src/index.js内容为：

import * as photon from '@silvia-odwyer/photon-node';

export default {
    async fetch(request, env, ctx) {
        const imageBytes = new Uint8Array([
            137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82,
            0, 0, 0, 1, 0, 0, 0, 1, 8, 2, 0, 0, 0, 144, 119, 83, 222,
            0, 0, 0, 1, 115, 82, 71, 66, 0, 174, 206, 28, 233, 0, 0, 0,
            4, 103, 65, 77, 65, 0, 0, 177, 142, 124, 251, 81, 147, 0, 0,
            0, 9, 112, 72, 89, 115, 0, 0, 14, 196, 0, 0, 14, 196, 1, 149,
            43, 14, 27, 0, 0, 0, 12, 73, 68, 65, 84, 8, 215, 99, 248, 207,
            240, 143, 0, 0, 2, 1, 1, 0, 226, 33, 60, 54, 0, 0, 0, 0,
            73, 69, 78, 68, 174, 66, 96, 130
          ]);
        const photonImage = new photon.PhotonImage(imageBytes, 1, 1);
        const result = photonImage.get_width;
        return new Response(`result: ${result}`);
    },
};

运行命令：

wrangler dev

报错信息：

⎔ Starting local server...
service core:user:example-worker: Uncaught TypeError: TextEncoder is not a constructor
  at index.js:2964:29 in node_modules/@silvia-odwyer/photon-node/photon_rs.js
  at index.js:11:50 in __require
  at index.js:4148:22
✘ [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.

直接导入photon的wasm文件 #

修改wrangler.toml内容为：

name = "example-worker"
main = "src/index.js"
compatibility_date = "2023-05-18"

将photon包中的photon_rs_bg.wasm复制到src目录（与index.js同目录）。

替换src/index.js内容为：

import module from './photon_rs_bg.wasm';

// 我知道这样不对，但需要传入合适的对象
const importObject = {
    imports: {}
};

const instance = await WebAssembly.instantiate(module, importObject);
    
export default {
    async fetch(request, env, ctx) {
        return new Response('hello');
    },
};

运行命令：

wrangler dev

报错信息：

⎔ Starting local server...
service core:user:example-worker: Uncaught TypeError: WebAssembly.instantiate(): Import #0 module="./photon_rs_bg.js" error: module is not an object or function
  at index.js:28:34
✘ [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.

看起来Wasm模块需要导入photon_rs_bg.js，但如果要提供所有辅助JS文件，和直接导入整个包没区别。

直接导入photon-node的wasm文件 #

按上一节步骤操作，但复制photon-node包中的wasm文件，报错：

⎔ Starting local server...
service core:user:example-worker: Uncaught TypeError: WebAssembly.instantiate(): Import #0 module="__wbindgen_placeholder__" error: module is not an object or function
  at index.js:28:34
✘ [ERROR] MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.

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