Javascript To Pixelate Images Using A Fixed Palette – ditherjs

ditherjs is a fancy and interest javascript library to pixelate the web images using a fixed palette, based on Html5 canvas element.

How to use it:

Include the dither.js javascript library in the html document.

<script src="src/ditherjs.js"></script>

Insert an image in the document.

<img class="dither" src="demo.jpg" alt="" />

The javascript to enable the image pixelation.

<script>
var palette1 = [
[0,0,0],
[85,255,85],
[255,85,85],
[255,255,85]
];
var palette2 = [
[0,0,0],
[85,255,255],
[255,85,85],
[255,255,255]
];
var palette3 = [
[0,0,0],
[255,0,255],
[0,255,255],
[255,255,255]
];
var coin = Math.random();
var palette = coin < 0.3 ? palette1 : coin < 0.6 ? palette2 : palette3;
var options = {
    "step": 3,
    "className": "dither",
    "palette": palette,
    "algorithm": "ordered"
};
dither = new DitherJS('.dither',options);
</script>

Changelog:

10/27/2018

• v0.10.0