use canvas image pixelating filter jQuery plugin

PixelFlow – an image pixelating filter jQuery plugin using canvas
PixelFlow follows a common jQuery plugin pattern whereby, $().PixelFlow([options]) is a base and if you want to call a specific function, this is passed as the first argument. Example:
// Instantiate/Create the initial PixelFlow var $pix = $('img').PixelFlow({'resolution' : 32}); // returns the canvas that was generated from the image // which is capable of being chained on. $pix.PixelFlow('rebase').PixelFlow('simpleanimate', 32, 3000); // This call will first return the pixelated image to // the original look, and then animate back to the 32 // resolution filter.
Initial Options
The initial project was limited in goal so there are few options but it is built for more expansion.
//set up default options var pluginName = 'PixelFlow' , defaults = { resolution : 16, offsetX : 0, offsetY : 0 };
Methods
drawPixels – basic function that covers entire canvas in pixelation filter.
-
No arguments.
$pix.PixelFlow('drawPixels'); // covers entire canvas with pixel filter
update – simple but necessary
-
options [object] – new options to implement.
$pix.PixelFlow('update', {'offsetX' : 16}); // changes the offset in the x direction to 16 // pixels and re-draws the filter.
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu