https://github.com/danielepiccone/ditherjs

A javascript library which dithers an <img> using a fixed palette
https://github.com/danielepiccone/ditherjs

canvas colors dithering javascript-library jquery-plugin retro

Last synced: 1 day ago
JSON representation

A javascript library which dithers an <img> using a fixed palette

• Host: GitHub
• URL: https://github.com/danielepiccone/ditherjs
• Owner: danielepiccone
• Created: 2014-02-08T18:16:20.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2023-05-17T15:39:24.000Z (over 1 year ago)
• Last Synced: 2024-10-08T14:45:41.390Z (about 1 month ago)
• Topics: canvas, colors, dithering, javascript-library, jquery-plugin, retro
• Language: JavaScript
• Homepage: http://danielepiccone.github.io/ditherjs/
• Size: 1.85 MB
• Stars: 131
• Watchers: 6
• Forks: 22
• Open Issues: 7
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-github-repos - danielepiccone/ditherjs - A javascript library which dithers an &lt;img&gt; using a fixed palette (JavaScript)

README

        
# ditherJS

[![License: CC BY-SA 4.0](https://img.shields.io/badge/License-CC%20BY--SA%204.0-lightgrey.svg)](http://creativecommons.org/licenses/by-sa/4.0/)

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

```sh

$ 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](https://github.com/Automattic/node-canvas) installed as a peer dependency to work, this is also needed to run run the tests during development.

```sh

$ 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.

```javascript

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

![Rick dangerhous II](http://www.rickdangerous.co.uk/cga20a.png)

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

### Client

```javascript

var DitherJS = require('ditherjs');

var ditherjs = new DitherJS([,options]);

ditherjs.dither(selector,[,options]); // should target  elements

```

as a jQuery plugin

```javascript

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

```

or directly on the element

```html



```

## Server

```javascript

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](http://www.danielepiccone.com)