ditherJS

A javascript library which dithers an image using a fixed palette.

Run npm run demo:client or npm run demo:sever to see it in action.

Installation and dependencies

$ npm install ditherjs --save

Both client and server are exposed as commonJS modules to be used with webpack or browserify.

The client-side version is also published with an UMD compatible wrapper and a jQuery plugin, those versions are in ./dist

The server-side version needs node-canvas installed as a peer dependency to work, this is also needed to run run the tests during development.

$ npm install ditherjs canvas --save

Usage and options

Any DitherJS instance exposes a dither(target, [options]) method which accepts a selector a Node or a buffer as a target and an optional options object.

The options can be passed directly to the method or directly in the constructor.

var options = {
    "step": 1, // The step for the pixel quantization n = 1,2,3...
    "palette": defaultPalette, // an array of colors as rgb arrays
    "algorithm": "ordered" // one of ["ordered", "diffusion", "atkinson"]
};

A default palette is provided which is CGA Palette 1

The palette structure is as an array of rgb colors [[r,g,b]..]

Client

var DitherJS = require('ditherjs');
 
var ditherjs = new DitherJS([,options]);
ditherjs.dither(selector,[,options]); // should target <img> elements

as a jQuery plugin

$('.dither').ditherJS(options);

or directly on the element

<img src="..." onload="ditherjs.dither(this)" />

Server

var DitherJS = require('ditherjs/server');
 
var ditherjs = new DitherJS([,options]);
 
// Get a buffer that can be loaded into a canvas
var buffer = fs.readFileSync('./myBeautifulFile.jpg|gif|png');
 
ditherjs.dither(buffer,[,options]);

Testimonials

Useful as a comb to a bald man. -Anon

author 2014 Daniele Piccone