Javascript To Pixelate Images Using A Fixed Palette – ditherjs

Category: Image , Javascript , Recommended | October 27, 2018
Author:danielepiccone
Views Total:275 views
Official Page:Go to website
Last Update:October 27, 2018
License:GPL 3.0

Preview:

Javascript To Pixelate Images Using A Fixed Palette – ditherjs

Description:

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

You Might Be Interested In:


Leave a Reply