Package Exports

pixelify-img

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pixelify-img) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

pixelify-img

license-badge

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`.

pixelify-img

Package Exports

Readme

pixelify-img

Demo

Dependencies

Installation

Usage

API

Pixelify(image, options)

@param image

@param Object:options

License