Resize, format images on-the-fly middleware for expressjs
Format, resize images on-the-fly for expressjs
. express-imgwiz
use sharp
underneat. It comes as both middleware and request handler.
Tips: Use with a CDN service to not re-generate image every time a request comes in. Remember to set cache TTL for a long period. If you are using Cloudflare, set the option to cache everything.
Example: resized image url
express-imgwiz
is available as a npm package. You can install via npm
or yarn
as normal
// install using npm
$ npm install express-imgwiz
// install using yarn
$ yarn add express-imgwiz
You can use express-imgwiz
as either a middleware or a handler. Note that they took the same arguments, but there is a /:path
param when using as handler
.
staticDir
(string, required): your static image directorycacheDir
(string): save generated file on disk into the given directory
// For ES6 syntax
import { imgWizMiddleware } from "express-imgwiz";
import path from "path";
// Or vanila nodejs syntax
const { imgWizMiddleware } = require("express-imgwiz");
const path = require("path")
app.use("/photos", imgWizMiddleware({
staticDir: path.join(__dirname, "static"), // comment out to disable serving static files
cacheDir: path.join(__dirname, "cached") // comment out to disable local caching
}))
// For ES6 syntax
import { imgWizHandler } from "express-imgwiz";
import path from "path";
// Or vanila nodejs syntax
const { imgWizHandler } = require("express-imgwiz");
const path = require("path")
app.get("/photos/:path", imgWizHandler({
staticDir: path.join(__dirname, "static"), // comment out to disable serving static files
cacheDir: path.join(__dirname, "cached") // comment out to disable local caching
}))
- `h` (number): resize height (h=460)
- `w` (number): resize width (w=640)
- `q` (number): quality (q=80)
- `fit` ("cover" | "contain" | "fill" | "inside" | "outside"): resize fit
- `position` ("top" | "right top" | "right" | "right bottom" | "bottom" | "bottom left" | "left top"): resize position
- `background`: (string): background colour when using a `fit=contain` (background=blue, background=#ffffff, background=(139,195,74,0.4))
- `sharpen` ("true" | "sigma ?, flat (1), jagged (2)"): sharpen target image (sharpen=true, [view more about sharpen](https://sharp.pixelplumbing.com/en/stable/api-operation/#sharpen))
- `fm` ("webp" | "jpg" | "jpeg" | "tiff" | "png"): format target image
- `kernel` ("nearest" | "cubic" | "mitchell" | "lanczos2" | "lanczos3"): image kernel option
- `enlarge` ("true" | "false"): enlarge image if given size is bigger than actual size
- `blur` ("true" or number (0.1 - 1000)): blur image
- `url` (string, optional): the target photo URL. If no `url` is specify, the library will look up on `staticDir` if enabled. Note: Use `encodeURIComponent` if `url` has query, otherwise it will fail. For example: `encodeURIComponent("https://host.com/photo.png?quey=value")`
Example URL using transform queries
// Serving a static file image:
// https://yourdomain.com/photos/image-file.png&fm=png&q=80&sharpen=true
// Get image from a URL:
// https://yourdomain.com/photos/?url=https://imagehost.com/image-file.png&fm=png&q=80&sharpen=true
process.env.EXPRESS_WIZ_CACHE_AGE
(number): Set caching age in seconds (default 31557600
)process.env.EXPRESS_WIZ_404_IMAGE
(string): Set a path to 404 error image (default undefined
). Note: Path is relative to the root directory, and only png
,jpeg
or jpg
image is accepted to avoid unnecessary minetype checking
EXPRESS_WIZ_404_IMAGE
to display a default imagehandleRequest
, update getting mine
method, clean up codesvg
filesvg
file, clean up codes.svg
image error, added background
option (thanks to @TheAndroidGuy)Feel free to ask or give feedback. Thank you!
Write tests. Cases should be tested:
Transform format querires
Serve local images
Serve static file for sub directory
Serve image using URL
Serving non-existing image (404)