pixelify-img

JS library for pixelating DOM images (or a portion of it).

It replaces the source of the given image with the modified version using Data URL, so any CSS applied to the original image will be keep, this method is even responsive right of the box.

TIP: Since the data is pixelated at runtime, saving the pixelated version of the image and using that instead will be a good option.

Demo

http://codepen.io/noeldelgado/pen/EGxzu/

Dependencies

None

Installation

NPM

npm intall pixelify-img --save

Usage

const image = document.querySelector('img.my_image');
const options = {
    pixel: 50,
    alpha : .5
};
 
new Pixelify(image, options);

API

Pixelify(image, options)

@param image

value type	default value	description
HTMLImageElement	undefined *required	Reference to the DOM image

@param Object:options

value name	value type	default value	description
pixel	Number	10	pixels size
x	Number	0	x-axis pixel of the image (in natural size) from which the effect will start
y	Number	0	y-axis pixel of the image (in natural size) from which the effect start
w	Number	image.naturalWidth	width from x where the effect will end
h	Number	image.naturalHeight	height from y where the effect will end
alpha	Number	1	Opacity applied to each pixel
clean	Boolean	false	Defines if the canvas should be clear when applying alpha.

License

MIT © Noel Delgado