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