Apply fun retro-computing-looking dithers to images.

// by default, dithers to 1-bit monochrome using flyod-steinberg diffusion
$('img').retroimage();

// 216 color "web safe" palette
$('img').retroimage(
  shades: 6, // 6x6x6 = 216
  color: true
);

$ bower install --save 'nstory/jquery.retroimage'

Options	Image
original image
{kernel:'atkinson'}
{shades:1,color:true}
{shades:6,color:true}

default: floydSteinberg

Sets the kernel used for Error diffusion.

$('img').retroimage({
  kernel: 'floydSteinberg'
});

• none
• oneDimensional
• twoDimensional
• floydSteinberg
• jarvisJudiceNinke
• atkinson

default: 1

The number of shades to use for each color plane. May be an integer between 1 and 256 inclusive.

$('img').retroimage({
  shades: 42
});

default: false

If true, dither the three color planes separately, and re-combine to make a color image. If false, convert the image to greyscale, and then dither.

$('img').retroimage({
  color: true
});

• Dithering is done client-side using Canvas.
• The src attribute of each image is replaced with a data-uri retrieved from the toDataURL method of HTMLCanvasElement.
• Only error-diffusion style dithering is currently supported

MIT