Image Manipulation
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.
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.
Edge Functions currently doesn't support image processing libraries such as Sharp
, which depend on native libraries. Only WASM-based libraries are supported.
Prerequisites
Make sure you have the latest version of the Supabase CLI installed.
Create the Edge Function
Create a new function locally:
1supabase 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:
1234567891011121314151617181920212223242526272829303132333435363738394041// This is an example showing how to use Magick WASM to do image manipulations in Edge Functions.//import { ImageMagick, initializeImageMagick, MagickFormat,} from "npm:@imagemagick/magick-wasm@0.0.30";const wasmBytes = await Deno.readFile( new URL( "magick.wasm", import.meta.resolve("npm:@imagemagick/magick-wasm@0.0.30"), ),);await initializeImageMagick( wasmBytes,);Deno.serve(async (req) => { const formData = await req.formData(); const content = await formData.get("file").bytes(); let result = ImageMagick.read( content, (img): Uint8Array => { // resize the image img.resize(500, 300); // add a blur of 60x5 img.blur(60, 5); return img.write( (data) => data, ); }, ); return new Response( result, { headers: { "Content-Type": "image/png" } }, );});
Test it locally
You can test the function locally by running:
12supabase startsupabase functions serve --no-verify-jwt
Then, make a request using curl
or your favorite API testing tool.
123curl --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
Now, let's deploy the function to your Supabase project.
12supabase linksupabase functions deploy image-blur
Hosted Edge Functions have 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.