8-bit.js
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>