feat: experimental animated support (ref #35)

README.md

@@ -23,11 +23,11 @@ The default server directory is the current working directory.
 You can use IPX as a Connect/Express middleware or directly use ipx api.
 
 ```js
-import { createIPX, createIPXMiddleware } from 'ipx'
+import { createIPX, createIPXMiddleware } from "ipx";
 
-const ipx = createIPX(/* options */)
-const app = express()
-app.use('/image', createIPXMiddleware(ipx))
+const ipx = createIPX(/* options */);
+const app = express();
+app.use("/image", createIPXMiddleware(ipx));
 ```
 
 ### Examples
@@ -46,32 +46,34 @@ Resize to `200px` using `embed` method and change format to `webp`:
 
 `http://localhost:3000/static/buffalo.png?embed&format=webp&resize=200`
 
-<h2 align="center">API</h2>
-
-| Property | Reference | Example | Comments
-| ---------|:---------- | :--------| :---
-| Width | _ | `http://localhost:3000/buffalo.png?width=200` |
-| Height | _ | `http://localhost:3000/buffalo.png?height=200` |
-| Trim | [Ref](https://sharp.pixelplumbing.com/api-resize#trim) | `http://localhost:3000/buffalo.png?trim=100` |
-| Format | [Ref](https://sharp.pixelplumbing.com/api-output#toformat) | `http://localhost:3000/buffalo.png?format=webp` | Supported format: jpg, jpeg, png, webp, avif, gif, heif
-| Quality | _ | `http://localhost:3000/buffalo.png?quality=50` | Accepted values: 0 to 100
-| Rotate | [Ref](https://sharp.pixelplumbing.com/api-operation#rotate) | `http://localhost:3000/buffalo.png?rotate=45` |
-| Flip | [Ref](https://sharp.pixelplumbing.com/api-operation#flip) | `http://localhost:3000/buffalo.png?flip` |
-| Flop | [Ref](https://sharp.pixelplumbing.com/api-operation#flop) | `http://localhost:3000/buffalo.png?flop` |
-| Sharpen | [Ref](https://sharp.pixelplumbing.com/api-operation#sharpen) | `http://localhost:3000/buffalo.png?sharpen=30` |
-| Median | [Ref](https://sharp.pixelplumbing.com/api-operation#median) | `http://localhost:3000/buffalo.png?median=10` |
-| Gamma | [Ref](https://sharp.pixelplumbing.com/api-operation#gamma) | `http://localhost:3000/buffalo.png?gamma=3` |
-| Negate | [Ref](https://sharp.pixelplumbing.com/api-operation#negate) | `http://localhost:3000/buffalo.png?negate` |
-| Normalize | [Ref](https://sharp.pixelplumbing.com/api-operation#normalize) | `http://localhost:3000/buffalo.png?normalize` |
-| Threshold | [Ref](https://sharp.pixelplumbing.com/api-operation#threshold) | `http://localhost:3000/buffalo.png?threshold=10` |
-| Tint | [Ref](https://sharp.pixelplumbing.com/api-colour#tint) | `http://localhost:3000/buffalo.png?tint=1098123` |
-| Grayscale | [Ref](https://sharp.pixelplumbing.com/api-colour#grayscale) | `http://localhost:3000/buffalo.png?grayscale` |
-
-<h2 align="center">Config</h2>
+### Modifiers
+
+| Property | Reference | Example | Comments |
+| --------- | :------------------------------------------------------------- | :----------------------------------------------- | :------------------------------------------------------ |
+| width | \_ | `http://localhost:3000/buffalo.png?width=200` |
+| height | \_ | `http://localhost:3000/buffalo.png?height=200` |
+| trim | [Ref](https://sharp.pixelplumbing.com/api-resize#trim) | `http://localhost:3000/buffalo.png?trim=100` |
+| format | [Ref](https://sharp.pixelplumbing.com/api-output#toformat) | `http://localhost:3000/buffalo.png?format=webp` | Supported format: jpg, jpeg, png, webp, avif, gif, heif |
+| quality | \_ | `http://localhost:3000/buffalo.png?quality=50` | Accepted values: 0 to 100 |
+| rotate | [Ref](https://sharp.pixelplumbing.com/api-operation#rotate) | `http://localhost:3000/buffalo.png?rotate=45` |
+| flip | [Ref](https://sharp.pixelplumbing.com/api-operation#flip) | `http://localhost:3000/buffalo.png?flip` |
+| flop | [Ref](https://sharp.pixelplumbing.com/api-operation#flop) | `http://localhost:3000/buffalo.png?flop` |
+| sharpen | [Ref](https://sharp.pixelplumbing.com/api-operation#sharpen) | `http://localhost:3000/buffalo.png?sharpen=30` |
+| median | [Ref](https://sharp.pixelplumbing.com/api-operation#median) | `http://localhost:3000/buffalo.png?median=10` |
+| gamma | [Ref](https://sharp.pixelplumbing.com/api-operation#gamma) | `http://localhost:3000/buffalo.png?gamma=3` |
+| negate | [Ref](https://sharp.pixelplumbing.com/api-operation#negate) | `http://localhost:3000/buffalo.png?negate` |
+| normalize | [Ref](https://sharp.pixelplumbing.com/api-operation#normalize) | `http://localhost:3000/buffalo.png?normalize` |
+| threshold | [Ref](https://sharp.pixelplumbing.com/api-operation#threshold) | `http://localhost:3000/buffalo.png?threshold=10` |
+| tint | [Ref](https://sharp.pixelplumbing.com/api-colour#tint) | `http://localhost:3000/buffalo.png?tint=1098123` |
+| grayscale | [Ref](https://sharp.pixelplumbing.com/api-colour#grayscale) | `http://localhost:3000/buffalo.png?grayscale` |
+| animated | - | `http://localhost:3000/buffalo.gif?animated` | Experimental |
+
+### Config
 
 Config can be customized using `IPX_*` environment variables.
 
 - `IPX_DIR`
+
  - Default: `.` (current working directory)
 
 - `IPX_DOMAINS`

src/ipx.ts

@@ -106,7 +106,16 @@ export function createIPX (userOptions: Partial<IPXOptions>): IPX {
  }
  }
 
- let sharp = Sharp(data)
+ // Experimental animated support
+ // https://github.com/lovell/sharp/issues/2275
+ const animated = modifiers.animated !== undefined || modifiers.a !== undefined
+ if (animated) {
+ // Gif output needs special libvips build
+ // https://github.com/lovell/sharp/pull/2012
+ format = 'webp'
+ }
+
+ let sharp = Sharp(data, { animated })
  Object.assign((sharp as any).options, options.sharp)
 
  // Resolve modifiers to handlers and sort