Skip to content
Edge Functions

图片处理

Supabase Storage 对你需要的大多数常见图片转换和优化提供了开箱即用的支持。 如果你需要做 Supabase Storage 提供的功能之外的自定义操作，你可以使用 Edge Functions 来编写自定义图片处理脚本。

🌐 Supabase Storage has out-of-the-box support for the most common image transformations and optimizations you need. If you need to do anything custom beyond what Supabase Storage provides, you can use Edge Functions to write custom image manipulation scripts.

在这个例子中，我们将使用 magick-wasm 来进行图片操作。magick-wasm 是流行的 ImageMagick 库的 WebAssembly 移植版本，支持处理 100 多种文件格式。

🌐 In this example, we will use magick-wasm to perform image manipulations. magick-wasm is the WebAssembly port of the popular ImageMagick library and supports processing over 100 file formats.

先决条件 #

🌐 Prerequisites

确保你已经安装了最新版本的 Supabase CLI。

🌐 Make sure you have the latest version of the Supabase CLI installed.

创建边缘功能 #

🌐 Create the Edge Function

在本地创建一个新函数：

🌐 Create a new function locally:

1
supabase functions new image-blur

写这个函数 #

🌐 Write the function

在这个例子中，我们正在实现一个功能，让用户可以上传图片并获得模糊的缩略图。

🌐 In this example, we are implementing a function allowing users to upload an image and get a blurred thumbnail.

这是在 index.ts 文件中的实现：

🌐 Here's the implementation in index.ts file:

1
// This is an example showing how to use Magick WASM to do image manipulations in Edge Functions.
2
//
3
import { ImageMagick, initializeImageMagick, MagickFormat } from 'npm:@imagemagick/magick-wasm@^0'
4
import { withSupabase } from 'npm:@supabase/server@^1'
5
6
const wasmBytes = await Deno.readFile(
7
  new URL('magick.wasm', import.meta.resolve('npm:@imagemagick/magick-wasm@^0'))
8
)
9
await initializeImageMagick(wasmBytes)
10
11
// Authenticated endpoint, so deploy with verify_jwt = true.
12
export default {
13
  fetch: withSupabase({ auth: 'user' }, async (req, _ctx) => {
14
    const formData = await req.formData()
15
    const file = formData.get('file')
16
    if (!(file instanceof Blob)) {
17
      return Response.json({ error: 'file is required' }, { status: 400 })
18
    }
19
    const content = await file.bytes()
20
21
    let result = ImageMagick.read(content, (img): Uint8Array => {
22
      // resize the image
23
      img.resize(500, 300)
24
      // add a blur of 60x5
25
      img.blur(60, 5)
26
27
      return img.write((data) => data)
28
    })
29
30
    return new Response(Uint8Array.from(result), {
31
      headers: { 'Content-Type': 'image/png' },
32
    })
33
  }),
34
}
View source

在本地测试 #

🌐 Test it locally

你可以通过运行以下命令在本地测试这个函数：

🌐 You can test the function locally by running:

1
supabase start
2
supabase functions serve --no-verify-jwt

然后，使用 curl 或你最喜欢的 API 测试工具发起请求。

🌐 Then, make a request using curl or your favorite API testing tool.

1
curl --location '<http://localhost:54321/functions/v1/image-blur>' \\
2
--form 'file=@"/path/to/image.png"'
3
--output '/path/to/output.png'

如果你打开 output.png 文件，你会发现一个经过转换的原始图片版本。

🌐 If you open the output.png file you will find a transformed version of your original image.

部署到你托管的项目 #

🌐 Deploy to your hosted project

把这个函数部署到你的 Supabase 项目里。

🌐 Deploy the function to your Supabase project.

1
supabase link
2
supabase functions deploy image-blur