使用 Denoflare 和 Wasm Photon 调整 Cloudflare Worker 中的图像大小

Question

我正在尝试学习如何在 Cloudflare Worker 中自行调整图像大小，而不是使用 Cloudflare Images 或 Cloudflare Image Resizing（因为定价）。

有一个 example 使用 Dinoflare 和来自 Photon 的 WebAssembly，但是这个示例太大了，我无法理解如何以更简单的方式使用它。

这是我想创建的最小示例：

• 从 Cloudflare R2（或任何地方）获取更大的图像（1+ MB），并将其大小调整为工作器中的缩略图（最好使用 Denoflare + Photon Wasm，但我愿意接受其他建议）。

我对 JavaScript 和 TypeScript 还很陌生，对 Denoflare 也很陌生，所以我什至不知道如何在一个简单的项目中导入 Photon。我让 Hello World 示例 正常工作，但仅此而已。我确实知道如何将 R2 与常规 Cloudflare Workers 一起使用，因此图像源并不是真正的问题，只需以基本方式导入和使用 Photon 即可。

更新

我正在尝试一种稍微不同的方法：直接在 Cloudflare 项目中导入 Photon，而不使用 Denoflare。希望 ChatGPT 禁令不包括达到某种起点的帮助，但以下内容基于 Photon Node.js 文档和 ChatGPT 帮助：

import photon from "@silvia-odwyer/photon-node";

export default {
  async fetch(request, env, ctx) {
    const imageResponse = await fetch("https://example.com/image.png");
    const imageBuffer = await imageResponse.arrayBuffer();
    const imageBase64 = btoa(String.fromCharCode(...new Uint8Array(imageBuffer)));
    let phtn_img = photon.PhotonImage.new_from_base64(imageBase64);
    const width = phtn_img.get_width();
    const height = phtn_img.get_height();
    const newWidth = 100;
    const newHeight = Math.floor((newWidth / width) * height);
    photon.resize(phtn_img, newWidth, newHeight);
    let output_base64 = phtn_img.get_base64();
    return new Response(output_base64, {
      headers: { "Content-Type": "image/png" },
    });
  },
};

不幸的是，连

import

都不起作用。我收到以下错误：

✘ [ERROR] Could not resolve "util"

    node_modules/@silvia-odwyer/photon-node/photon_rs.js:4:45:
      4 │ const { TextEncoder, TextDecoder } = require(`util`);
        ╵                                              ~~~~~~

  The package "util" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "path"

    node_modules/@silvia-odwyer/photon-node/photon_rs.js:4273:21:
      4273 │ const path = require('path').join(__dirname, 'photon_rs_bg.wasm');
           ╵                      ~~~~~~

  The package "path" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Could not resolve "fs"

    node_modules/@silvia-odwyer/photon-node/photon_rs.js:4274:22:
      4274 │ const bytes = require('fs').readFileSync(path);
           ╵                       ~~~~

  The package "fs" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file to enable Node.js compatibility.


✘ [ERROR] Build failed with 3 errors:

  node_modules/@silvia-odwyer/photon-node/photon_rs.js:4:45: ERROR: Could not resolve "util"
  node_modules/@silvia-odwyer/photon-node/photon_rs.js:4273:21: ERROR: Could not resolve
  "path"
  node_modules/@silvia-odwyer/photon-node/photon_rs.js:4274:22: ERROR: Could not resolve "fs"

我可以理解

fs

和

path

不起作用，因为在 Cloudflare Worker 上我无法像在 Node 中那样访问文件系统。我可以获得另一个版本的 Photon 以在 Node 中工作吗？

Answer 1

要使用 Denoflare 和 Wasm Photon 调整 Cloudflare Worker 中的图像大小，您可以按照以下步骤操作：

安装 Denoflare 和 Photon：

首先，确保您的项目中安装了 Denoflare 和 Wasm Photon。您可以通过将必要的依赖项添加到项目的

package.json

文件中来完成此操作：

npm install denoflare @silvia-odwyer/photon-node

导入模块：

在您的 Cloudflare Worker 脚本中，导入所需的模块：

import denoflare from 'denoflare';
import photon from '@silvia-odwyer/photon-node';

调整图像大小：

在获取函数中，您现在可以调整图像大小。这是一个例子：

export default {
  async fetch(request, env, ctx) {
    const imageResponse = await fetch("https://example.com/image.png");
    const imageBuffer = await imageResponse.arrayBuffer();
    const imageBase64 = btoa(String.fromCharCode(...new Uint8Array(imageBuffer)));
    let phtn_img = photon.PhotonImage.new_from_base64(imageBase64);
    const width = phtn_img.get_width();
    const height = phtn_img.get_height();
    const newWidth = 100;
    const newHeight = Math.floor((newWidth / width) * height);
    photon.resize(phtn_img, newWidth, newHeight);
    let output_base64 = phtn_img.get_base64();
    return new Response(output_base64, {
      headers: { "Content-Type": "image/png" },
    });
  },
};

此代码获取图像，将其大小调整为指定宽度，然后返回调整后的图像。

部署：

确保使用更新的代码部署您的 Cloudflare Worker。

测试：

通过向部署工作线程的端点发送请求来测试工作线程。

请记住将图像 URL 替换为您要调整大小的图像的实际 URL。