use canvas image pixelating filter jQuery plugin

Home Image Effects use canvas image pixelating filter jQuery plugin

use canvas image pixelating filter jQuery plugin

4 years ago Views

12646

1821

devnimlos

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.

Tag: image gallery