mirror of
https://github.com/supabase/supabase.git
synced 2026-06-18 13:43:53 +08:00
0aa7b4965f
Contributes to DOCS-1052 Contributes to DOCS-1057 ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Resolves linting warning for "let's" and adds an exception for product name. ## Tophatting 1. Read the diff and see if changes make sense in context. 2. Run `pnpm lint:mdx`, search for "let's" and see no instances. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Updated instructional copy across multiple AI, authentication, database, functions, realtime, storage, and troubleshooting guides to improve clarity and consistency. * Replaced conversational phrasing (for example, “Let’s…/Let’s see…”) with direct imperatives, tightened example lead-ins, and adjusted a few step explanations for readability. * Refreshed some tutorial text and code-sample presentation in guides (no behavioral changes). * Added/adjusted minor MDX lint guidance in a couple of documents. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Nik Richers <nrichers@gmail.com>
79 lines
2.2 KiB
Plaintext
79 lines
2.2 KiB
Plaintext
---
|
||
title: 'Image Manipulation'
|
||
description: 'How to optimize and transform images using Edge Functions.'
|
||
---
|
||
|
||
Supabase Storage has [out-of-the-box support](/docs/guides/storage/serving/image-transformations?queryGroups=language&language=js) 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.
|
||
|
||
In this example, we will use [`magick-wasm`](https://github.com/dlemstra/magick-wasm) to perform image manipulations. `magick-wasm` is the WebAssembly port of the popular ImageMagick library and supports processing over 100 file formats.
|
||
|
||
<Admonition type="caution">
|
||
|
||
Edge Functions currently doesn't support image processing libraries such as `Sharp`, which depend on native libraries. Only WASM-based libraries are supported.
|
||
|
||
</Admonition>
|
||
|
||
### Prerequisites
|
||
|
||
Make sure you have the latest version of the [Supabase CLI](/docs/guides/cli#installation) installed.
|
||
|
||
### Create the Edge Function
|
||
|
||
Create a new function locally:
|
||
|
||
```bash
|
||
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.
|
||
|
||
Here's the implementation in `index.ts` file:
|
||
|
||
<$CodeSample
|
||
path="edge-functions/supabase/functions/image-manipulation/index.ts"
|
||
lines={[[1, -1]]}
|
||
/>
|
||
|
||
### Test it locally
|
||
|
||
You can test the function locally by running:
|
||
|
||
```bash
|
||
supabase start
|
||
supabase functions serve --no-verify-jwt
|
||
|
||
```
|
||
|
||
Then, make a request using `curl` or your favorite API testing tool.
|
||
|
||
```bash
|
||
curl --location '<http://localhost:54321/functions/v1/image-blur>' \\
|
||
--form 'file=@"/path/to/image.png"'
|
||
--output '/path/to/output.png'
|
||
|
||
```
|
||
|
||
If you open the `output.png` file you will find a transformed version of your original image.
|
||
|
||
### Deploy to your hosted project
|
||
|
||
Deploy the function to your Supabase project.
|
||
|
||
```bash
|
||
supabase link
|
||
supabase functions deploy image-blur
|
||
|
||
```
|
||
|
||
<Admonition type="caution">
|
||
|
||
Hosted Edge Functions have [limits](/docs/guides/functions/limits) on memory and CPU usage.
|
||
|
||
If you try to perform complex image processing or handle large images (> 5MB) your function may return a resource limit exceeded error.
|
||
|
||
</Admonition>
|