Neutralize Pesky Miscreants

    imagecachejs

    0.4.0 • Public • Published
    Imagecache Build Status Code Climate Code Coverage

    Express middleware for transforming images and caching them for quick retrieval

    Get started

    Install with npm or yarn:

    npm install --save imagecachejs

    You can then use imagecache in your project. The constructor imagecache() will return an express router which you can mount as a subpath for your express app

    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')
    })

    Examples

    You can view our example app with the following commands:

    # checkout the repository 
    git clone https://github.com/mahaplatform/imagecachejs.git
     
    # change directory 
    cd imagecachejs/examples
     
    # install dependencies 
    npm install
     
    # build the source 
    npm run build
     
    # start the server 
    npm run start

    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 (Amazon 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:

    bri=15&con=-10&w=250

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

    op[0][bri]=15&op[1][con]=-10&op[2][w]=250

    Transformations

    The following transformations are available through Imagecache:

    Brightness

    Increase or decrease the brightness of an image

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

    Contrast

    Increase or decrease the contrast of an image

    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 an 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

    Author & Credits

    Imagecache was originally written by Greg Kops and is based upon his work with Think Topography and The Cornell Cooperative Extension of Tompkins County.

    Special thanks to Oliver Moran and the Jimp project for building the engine that makes Imagecache possible!

    Keywords

    none

    Install

    npm i imagecachejs

    DownloadsWeekly Downloads

    54

    Version

    0.4.0

    License

    ISC

    Unpacked Size

    9.42 MB

    Total Files

    41

    Last publish

    Collaborators

    • ccetc
    • mahaplatform
    • mochini
    • thinktopography