Convert images (or portions of it) into a pixelated version
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist fixing empty spaces Apr 21, 2014
src fixing empty spaces Apr 21, 2014
.gitignore init commit Apr 21, 2014
Gruntfile.js init commit Apr 21, 2014
LICENSE adding license Apr 21, 2014
README.md updating readme Apr 21, 2014
package.json init commit Apr 21, 2014

README.md

Pixelify

Convert images (or portions of it) into a pixelated version.

It replaces the source of the given image with the altered version using DATA URL format. That mean that any css styles applied to the original image will not being lost.

Since the data is pixelated at runtime, one good option can be to save the pixelated version of the image and use that instead of running the script every time.

Usage

var image, options;

image = document.querySelector('img.my_image');
optons = {
    pixel : 50,
    alpha : .5
};

new Pixelify(image, options);

Parameters (image, options)

@image <required> [Object] the reference to the image on the DOM
@options <optional> [Object] the options to be applied to the image

new Pixelify(image, {
	/* Default Options */
	pixel	: 10,
	x 		: 0,
	y 		: 0,
	w 		: image.width,
	h 		: image.height,
	alpha : 1,
	clean : false
});

Demo

Codepen