imagecachejs

Imagecache

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 the following syntax:

# http://{hostname}/{mountPoint}/{transformationString}/{imagePath}
http://example.com/imagecache/bri=50&sat=30/images/kitten.png

By putting all of the image transformations in the url file path rather than a query string, the transformed file can easily be saved to filesystem and served as a static asset from static middleware (express.static), a web server (nginx, apache), a content delivery network (cloudfront, akamai), or a caching web proxy (varnish, squid).

Transformation Strings

Image transformations are invoked using a 'query string like' syntax. For example, if you want to brighten an image, decrease the contrast, and resize the image to a width of 250 pixels, the transformation string would be:

http://example.com/imagecache/bri=15&con=-10&w=250/images/kitten.png

These transformations, however, will not necessarily be executed in the order given. If the sequence is important to you, use the op argument:

http://example.com/imagecache/op[0][bri]=15&op[1][con]=-10&op[2][w]=250/images/kitten.png

Transformations

There are a number of transformations available through Imagecache:

• Brightness
• Contrast
• Hue
• Saturation
• Tint
• Invert
• Blur
• Flip
• Rotate
• Padding
• Border
• Crop
• Resize

Brightness

Increase or decrease the brightness

http://example.com/imagecache/bri=50/images/kitten.png

http://example.com/imagecache/bri=-50/images/kitten.png

Contrast

Increase or decrease the brightness

http://example.com/imagecache/con=50/images/kitten.png

http://example.com/imagecache/con=-50/images/kitten.png

Hue

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

http://example.com/imagecache/hue=90/images/kitten.png

http://example.com/imagecache/hue=-90/images/kitten.png

Saturation

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

http://example.com/imagecache/sat=50/images/kitten.png

http://example.com/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://example.com/imagecache/tint=red,50/images/kitten.png

http://example.com/imagecache/tint=blue,50/images/kitten.png

Invert

Invert the colors of the image

http://example.com/imagecache/invert=true/images/kitten.png

Blur

Blur image with a radius

http://example.com/imagecache/blur=15/images/kitten.png

Flip

Flip the image horizontally, vertically, or both

http://example.com/imagecache/flip=h/images/kitten.png

http://example.com/imagecache/flip=v/images/kitten.png

http://example.com/imagecache/flip=vh/images/kitten.png

Rotate

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

http://example.com/imagecache/rot=45/images/kitten.png

Padding

Put x pixels of padding around the image

http://example.com/imagecache/pad=50/images/kitten.png

Border

Draw an x pixel thick border around the image

http://example.com/imagecache/border=50,red/images/kitten.png

Crop

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

http://example.com/imagecache/crop=100,100,400,200/images/kitten.png

Resize

Resize the image

http://example.com/imagecache/w=500/images/kitten.png

http://example.com/imagecache/w=200&dpi=2/images/kitten.png

http://example.com/imagecache/h=250/images/kitten.png

http://example.com/imagecache/w=300&h=300/images/kitten.png