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 path from 'path'
import express from 'express'
import imagecache from 'imagecachejs'

const app = express()

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

app.use('/imagecache', imagecache({
  destination: path.resolve('cached'),
  sources: [
    '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 two syntaxes:

# query string syntax
http://localhost:3000/imagecache/{imagePath}?{queryString}

# pathname syntax
http://localhost:3000/imagecache/{queryString}/{imagePath}

The pathname syntax is usually preferable because it is something that a CDN or caching proxy can easily request and save using the full pathname as the cache key

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 white with a opacity value between 1 and 100

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

Shade

Shade the image with a layer of black with a opacity value between 1 and 100

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

Mix

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

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

http://localhost:3000/imagecache/mix=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