npm package: @jambff/supabase-image-resizer
Description: An image resize service backed by Supabase.
Author: Alex Mendes
Latest version: 1.2.0

# Jambff Supabase Image Resizer

An image resize service backed by Supabase.

## Deploying with DigitalOcean

### Deploy using App Platform

[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/jambff/supabase-image-resizer/tree/main)

### Deploy using Functions

Install and configure [doctl](https://docs.digitalocean.com/reference/doctl/how-to/install/),
along with the serverless plugin:

```text
doctl serverless install
```

Create a namespace for the function:

```text
doctl serverless namespaces create --label image-resizer --region lon1
```

Create a .env file and populate with your `SUPABASE_PROJECT_URL` and `SUPABASE_SERVICE_ROLE_KEY`.

```text
cp .env.template .env
```

Deploy the function:

```text
doctl serverless deploy . --env .env
```

## Manual setup

Install the package:

```text
yarn install @jambff/supabase-image-resizer
```

Via a `.env` file, or some other mechanism depending on your environment, set
the `SUPABASE_PROJECT_URL` and `SUPABASE_SERVICE_ROLE_KEY` as environment
variables, which can be retrieved from the Supabase dashboard.

Launch the server with:

```js
import { launchServer } from '@jambff/supabase-image-resizer';

launchServer();
```

## Usage

Image requests are made in the following format:

```text
http://your.domain.com/<BUCKET>/<FOLDER>/<FILE_NAME>
```

for example:

```text
http://your.domain.com/images/public/my-image.jpg
```

The following query parameters are available:

| URL Arg | Type | Description |
|---|----|---|
|`w`|Number|Max width of the image.|
|`h`|Number|Max height of the image.|
|`quality`|Number, 0-100|Image quality.|
|`resize`|String, "w,h"|A comma separated string of the target width and height in pixels. Crops the image.|
|`crop_strategy`|String, "smart", "entropy", "attention"|There are 3 automatic cropping strategies for use with `resize`: <ul><li>`attention`: good results, ~70% slower</li><li>`entropy`: mediocre results, ~30% slower</li><li>`smart`: best results, ~50% slower</li>|
|`gravity`|String|Alternative to `crop_strategy`. Crops are made from the center of the image by default, passing one of "north", "northeast", "east", "southeast", "south", "southwest", "west", "northwest" or "center" will crop from that edge.|
|`fit`|String, "w,h"|A comma separated string of the target maximum width and height. Does not crop the image.|
|`crop`|Boolean\|String, "x,y,w,h"|Crop an image by percentages x-offset, y-offset, width and height (x,y,w,h). Percentages are used so that you don’t need to recalculate the cropping when transforming the image in other ways such as resizing it. You can crop by pixel values too by appending `px` to the values. `crop=160px,160px,788px,788px` takes a 788 by 788 pixel square starting at 160 by 160.|
|`zoom`|Number|Zooms the image by the specified amount for high DPI displays. `zoom=2` produces an image twice the size specified in `w`, `h`, `fit` or `resize`. The quality is automatically reduced to keep file sizes roughly equivalent to the non-zoomed image unless the `quality` argument is passed.|
|`webp`|Boolean, 1|Force WebP format.|
|`lb`|String, "w,h"|Add letterboxing effect to images, by scaling them to width, height while maintaining the aspect ratio and filling the rest with black or `background`.|
|`background`|String|Add background color via name (red) or hex value (%23ff0000). Don't forget to escape # as `%23`.|