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: about 18 hours 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 (about 12 years ago)
- Default Branch: master
- Last Pushed: 2023-05-17T15:39:24.000Z (almost 3 years ago)
- Last Synced: 2026-01-14T00:10:26.169Z (about 2 months ago)
- Topics: canvas, colors, dithering, javascript-library, jquery-plugin, retro
- Language: JavaScript
- Homepage: http://danielepiccone.github.io/ditherjs/
- Size: 1.85 MB
- Stars: 152
- Watchers: 5
- Forks: 21
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-github-repos - danielepiccone/ditherjs - A javascript library which dithers an <img> using a fixed palette (JavaScript)
README
# ditherJS
[](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
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)