如何在 Cloudflare Workers 上使用 Photon 图像库

Question

我的最终目标是在 Cloudflare Worker 中制作缩略图。

之前我问过Denoflare with Photon，但我试图尽可能消除复杂性，所以这个问题只是关于Photon。如何在 Cloudflare Worker 中使用 Photon？ （用 Photon 做任何事情，而不仅仅是调整大小）

其他人也有同样的问题（请参阅Gitter、GitHub）。

以下部分显示了我尝试过的事情。

设置

我创建了一个新的 Cloudflare 项目：

npm create cloudflare@latest

• 名称：示例工人
• “Hello World”工人
• 无打字稿（使用 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);  // <- error here
    getUint8Memory0().set(arg, ptr / 1);
    WASM_VECTOR_LEN = arg.length;
    return ptr;
}

photon-node npm 包

设置：

npm install @silvia-odwyer/photon-node

将

node_compat = true

添加到 wrangler.toml：

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 复制到与 index.js 文件相同的文件夹（即 src 文件夹）。

将 src/index.js 替换为：

import module from './photon_rs_bg.wasm';

// I'm sure this isn't right but I need some sort of object here.
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.

Answer 1

我完成了工作，需要使用 patch-package 处理 photon

https://github.com/ccbikai/cloudflare-worker-image