imagecachejs

imagecache.js

Imagecache is a 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')
})

Brightness

Increase or decrease the brightness

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

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

Contrast

Increase or decrease the brightness

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

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

Flip

Flip the image horizontally, vertically, or both

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

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

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

Colorize

Colorize image with a preset

http://localhost:3000/imagecache/images/kitten.png?col=greyscale

http://localhost:3000/imagecache/images/kitten.png?col=sepia

Blur

Blur image with a radius

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

Rotate

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

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

Padding

Put x pixels of padding around the image

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

Border

Draw an x pixel thick border around the image

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

Hue

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

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

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

Saturation

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

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

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

Tint

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

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

Shade

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

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

Invert

Invert the colors of the image

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

Crop

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

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

Resize

Resize the image

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

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

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

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