1 | # IPX
|
2 |
|
3 | [![NPM Vernion](https://flat.badgen.net/npm/v/ipx)](https://www.npmjs.com/package/ipx)
|
4 | [![NPM Downloads](https://flat.badgen.net/npm/dt/ipx)](https://www.npmjs.com/package/ipx)
|
5 | [![Package Size](https://flat.badgen.net/packagephobia/install/ipx)](https://packagephobia.now.sh/result?p=ipx)
|
6 |
|
7 | High performance, secure and easy to use image proxy based on [sharp](https://github.com/lovell/sharp) and [libvips](https://github.com/libvips/libvips).
|
8 |
|
9 | ## Usage
|
10 |
|
11 | ### Quick Start
|
12 |
|
13 | You can use `ipx` command to start server using:
|
14 |
|
15 | ```bash
|
16 | $ npx ipx
|
17 | ```
|
18 |
|
19 | The default server directory is the current working directory.
|
20 |
|
21 | ### Programatic Usage
|
22 |
|
23 | You can use IPX as a Connect/Express middleware or directly use ipx api.
|
24 |
|
25 | ```js
|
26 | import { createIPX, createIPXMiddleware } from "ipx";
|
27 |
|
28 | const ipx = createIPX(/* options */);
|
29 | const app = express();
|
30 | app.use("/image", createIPXMiddleware(ipx));
|
31 | ```
|
32 |
|
33 | ### Examples
|
34 |
|
35 | > The examples assume that a `static` folder with `buffalo.png` file is present in the directory where IPX server is running.
|
36 |
|
37 | Get original image:
|
38 |
|
39 | `http://localhost:3000/_/static/buffalo.png`
|
40 |
|
41 | Change format to `webp` and keep other things same as source:
|
42 |
|
43 | `http://localhost:3000/f_webp/static/buffalo.png`
|
44 |
|
45 | Keep original format (`png`) and set width to `200`:
|
46 |
|
47 | `http://localhost:3000/w_200/static/buffalo.png`
|
48 |
|
49 | Resize to `200x200px` using `embed` method and change format to `webp`:
|
50 |
|
51 | `http://localhost:3000/embed,f_webp,s_200x200/static/buffalo.png`
|
52 |
|
53 | ### Modifiers
|
54 |
|
55 | | Property | Docs | Example | Comments |
|
56 | | --------------- | :-------------------------------------------------------------- | :---------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
57 | | width / w | [Docs](https://sharp.pixelplumbing.com/api-resize#resize) | `http://localhost:3000/width_200/buffalo.png` |
|
58 | | height / h | [Docs](https://sharp.pixelplumbing.com/api-resize#resize) | `http://localhost:3000/height_200/buffalo.png` |
|
59 | | resize / s | [Docs](https://sharp.pixelplumbing.com/api-resize#resize) | `http://localhost:3000/s_200x200/buffalo.png` |
|
60 | | fit | [Docs](https://sharp.pixelplumbing.com/api-resize#resize) | `http://localhost:3000/s_200x200,fit_outside/buffalo.png` | Sets `fit` option for `resize`.
|
61 | | position / pos | [Docs](https://sharp.pixelplumbing.com/api-resize#resize) | `http://localhost:3000/s_200x200,pos_top/buffalo.png` | Sets `position` option for `resize`.
|
62 | | trim | [Docs](https://sharp.pixelplumbing.com/api-resize#trim) | `http://localhost:3000/trim_100/buffalo.png` |
|
63 | | format | [Docs](https://sharp.pixelplumbing.com/api-output#toformat) | `http://localhost:3000/format_webp/buffalo.png` | Supported format: `jpg`, `jpeg`, `png`, `webp`, `avif`, `gif`, `heif` |
|
64 | | quality / q | \_ | `http://localhost:3000/quality_50/buffalo.png` | Accepted values: 0 to 100 |
|
65 | | rotate | [Docs](https://sharp.pixelplumbing.com/api-operation#rotate) | `http://localhost:3000/rotate_45/buffalo.png` |
|
66 | | enlarge | \_ | `http://localhost:3000/enlarge,s_2000x2000/buffalo.png` | Allow the image to be upscaled. By default the returned image will never be larger than the source in any dimension, while preserving the requested aspect ratio. |
|
67 | | flip | [Docs](https://sharp.pixelplumbing.com/api-operation#flip) | `http://localhost:3000/flip/buffalo.png` |
|
68 | | flop | [Docs](https://sharp.pixelplumbing.com/api-operation#flop) | `http://localhost:3000/flop/buffalo.png` |
|
69 | | sharpen | [Docs](https://sharp.pixelplumbing.com/api-operation#sharpen) | `http://localhost:3000/sharpen_30/buffalo.png` |
|
70 | | median | [Docs](https://sharp.pixelplumbing.com/api-operation#median) | `http://localhost:3000/median_10/buffalo.png` |
|
71 | | gamma | [Docs](https://sharp.pixelplumbing.com/api-operation#gamma) | `http://localhost:3000/gamma_3/buffalo.png` |
|
72 | | negate | [Docs](https://sharp.pixelplumbing.com/api-operation#negate) | `http://localhost:3000/negate/buffalo.png` |
|
73 | | normalize | [Docs](https://sharp.pixelplumbing.com/api-operation#normalize) | `http://localhost:3000/normalize/buffalo.png` |
|
74 | | threshold | [Docs](https://sharp.pixelplumbing.com/api-operation#threshold) | `http://localhost:3000/threshold_10/buffalo.png` |
|
75 | | tint | [Docs](https://sharp.pixelplumbing.com/api-colour#tint) | `http://localhost:3000/tint_1098123/buffalo.png` |
|
76 | | grayscale | [Docs](https://sharp.pixelplumbing.com/api-colour#grayscale) | `http://localhost:3000/grayscale/buffalo.png` |
|
77 | | animated | - | `http://localhost:3000/animated/buffalo.gif` | Experimental |
|
78 |
|
79 | ### Config
|
80 |
|
81 | Config can be customized using `IPX_*` environment variables.
|
82 |
|
83 | - `IPX_DIR`
|
84 |
|
85 | - Default: `.` (current working directory)
|
86 |
|
87 | - `IPX_DOMAINS`
|
88 | - Default: `[]`
|
89 |
|
90 | ## License
|
91 |
|
92 | MIT
|