Pixelator

Version 1.0

Pixelator is an open source library that allows you to generate a HTML-only image (a collection of pixels) from an image format (PNG, JPEG etc).

How to

• Add the Raw version of one of the scripts (min or normal) into your source code via the <script> HTML tag.
<script src="https://raw.github.com/g3x0/pixelator/master/pixelator.min.js"></script>

• You will need a <div> with a specific id to use the script with and the actual implementation of the script.
<div id="image"></div>

Usage

Pixelate a photo

var use = new Pixelator();

use.pixelate({
    image: 'mountain.png',
    target: '#image',
    res: 20
});

This will pixelate a photo with blocks 20 by 20 pixels in size.

Uneven pixels

var use = new Pixelator();

use.pixelate({
    image: 'mountain.png',
    target: '#image',
    width: 20,
    height: 40
});

Horizontally streching a photo

var use = new Pixelator();

use.pixelate({
    image: 'mountain.png',
    target: '#image',
    height: 30,
    type: 'horizontal',
    offset: 150
});

This will stretch (copy) the 150th vertical pixel row all over the image, giving the impression of a horizontally stretched image. Similarlly, you can vertically strech an image.

Vertically streching a photo

var use = new Pixelator();

use.pixelate({
    image: 'mountain.png',
    target: '#image',
    width: 20,
    type: 'vertical'
});

Save the source

Additionally, if you decided to use the source code in your project, you can append the source: true option to see the source code of the modified image.

var use = new Pixelator();

use.pixelate({
    image: 'mountain.png',
    target: '#image',
    res: 20,
    source: true
});

Original photo