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:
_10supabase 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:
_41// This is an example showing how to use Magick WASM to do image manipulations in Edge Functions._41//_41import {_41 ImageMagick,_41 initializeImageMagick,_41 MagickFormat,_41} from "npm:@imagemagick/magick-wasm@0.0.30";_41_41const wasmBytes = await Deno.readFile(_41 new URL(_41 "magick.wasm",_41 import.meta.resolve("npm:@imagemagick/magick-wasm@0.0.30"),_41 ),_41);_41await initializeImageMagick(_41 wasmBytes,_41);_41_41Deno.serve(async (req) => {_41 const formData = await req.formData();_41 const content = await formData.get("file").bytes();_41_41 let result = ImageMagick.read(_41 content,_41 (img): Uint8Array => {_41 // resize the image_41 img.resize(500, 300);_41 // add a blur of 60x5_41 img.blur(60, 5);_41_41 return img.write(_41 (data) => data,_41 );_41 },_41 );_41_41 return new Response(_41 result,_41 { headers: { "Content-Type": "image/png" } },_41 );_41});
Test it locally
You can test the function locally by running:
_10supabase start_10supabase functions serve --no-verify-jwt
Then, make a request using curl or your favorite API testing tool.
_10curl --location '<http://localhost:54321/functions/v1/image-blur>' \\_10--form 'file=@"/path/to/image.png"'_10--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.
_10supabase link_10supabase 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.