8-bit.js is a small javascript script, that works with jquery.

Once the script loaded to your website, it will seek the page until it finds an image with a .8bitme class

If the script find the .8bitme class, it will transform the image, into a 8-bit version (On canvas..)


Usage :

Just load the script right before the end of the body.

<script type="text/javascript" src="path/to/8-bit.js"> </script>

Then you have to chose the image you want to 8-bit, you simply have to add the class 8bitme to this image, and you can select the amount of bits by changing the value of the data-bit.
The data-bit attribute can have a value between 0 - 1.

0 = 0% & 1 = 100%
So you can add values like this data-bit=".15".

<img src="path/to/my/img.png" alt="8-bit powa !" class="8bitme" data-bit=".15" />

What will happen :

Consider you've got the following code:

<img src="my/path.png" class="8bitme" data-bit=".15" />

It will create :

<canvas id="canvas" width="253" height="253" data-url="my/path.png" data-bit=".15"></canvas>