Zuvo 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 Zuvo 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.
Prerequisites
Make sure you have the latest version of the Zuvo CLI installed.
Create the Edge Function
Create a new function locally:
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:
Code sample: see project quickstart in Zuvo Studio.
Test it locally
You can test the function locally by running:
supabase start
supabase functions serve --no-verify-jwt
Then, make a request using curl or your favorite API testing tool.
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 Zuvo project.
supabase link
supabase functions deploy image-blur