imagecachejs

imagecachejs

Imagecache is an express middleware that lets you manipulate images and then cache them for quick retrieval.

Installation

Install with npm or yarn:

npm install --save imagecachejs

Usage

It's easy to just add imagecache to your application

import express from 'express'
import imagecache from 'imagecachejs'

const app = express()

app.use(express.static('./public'))

app.use('/imagecache', imagecache({
  webRoot: 'public',
  sources: [
    'public',
    'http://localhost:8080'
  ]
}))

app.listen(8080, function () {
  console.log('Example app listening on port 8080')
})

Generating an Image

Once your server is up and running, you can invoke an image transformation using one of the following syntax:

http://localhost:3000/imagecache/{queryString}/{imagePath}

By putting all of the image transformations in the file path rather than a query string, the transformed file can easily be saved to filesystem and served as a static asset from a web server, CDN, caching web proxy.

Brightness

Increase or decrease the brightness

http://localhost:3000/imagecache/bri=50/images/kitten.png

http://localhost:3000/imagecache/bri=-50/images/kitten.png

Contrast

Increase or decrease the brightness

http://localhost:3000/imagecache/con=50/images/kitten.png

http://localhost:3000/imagecache/con=-50/images/kitten.png

Hue

Rotate the hue of an image with a value between -360 and 360 degrees

http://localhost:3000/imagecache/hue=90/images/kitten.png

http://localhost:3000/imagecache/hue=-90/images/kitten.png

Saturation

Increase or decrease the saturation of an image with an amount between -100% and 100%

http://localhost:3000/imagecache/sat=50/images/kitten.png

http://localhost:3000/imagecache/sat=-50/images/kitten.png

Tint

Tint the image with a layer of any color with a opacity value between 1% and 100%

http://localhost:3000/imagecache/tint=red,50/images/kitten.png

http://localhost:3000/imagecache/tint=blue,50/images/kitten.png

Invert

Invert the colors of the image

http://localhost:3000/imagecache/invert=true/images/kitten.png

Blur

Blur image with a radius

http://localhost:3000/imagecache/blur=15/images/kitten.png

Flip

Flip the image horizontally, vertically, or both

http://localhost:3000/imagecache/flip=h/images/kitten.png

http://localhost:3000/imagecache/flip=v/images/kitten.png

http://localhost:3000/imagecache/flip=vh/images/kitten.png

Rotate

Rotate image and then crop to largest possible rectangle with same aspect ratio

http://localhost:3000/imagecache/rot=45/images/kitten.png

Padding

Put x pixels of padding around the image

http://localhost:3000/imagecache/pad=50/images/kitten.png

Border

Draw an x pixel thick border around the image

http://localhost:3000/imagecache/border=50,red/images/kitten.png

Crop

Crop the image using a reactangle in the format "x,y,w,h"

http://localhost:3000/imagecache/crop=100,100,400,200/images/kitten.png

Resize

Resize the image

http://localhost:3000/imagecache/w=500/images/kitten.png

http://localhost:3000/imagecache/w=200&dpi=2/images/kitten.png

http://localhost:3000/imagecache/h=250/images/kitten.png

http://localhost:3000/imagecache/w=300&h=300/images/kitten.png