Submit your widget

use canvas image pixelating filter jQuery plugin

Created 5 years ago   Views 13063   downloads 1897    Author devnimlos
 use canvas image pixelating filter jQuery plugin
View DemoDownload 682.8 KB
Share |

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

drawPixels – basic function that covers entire canvas in pixelation filter.

  • No arguments.
    // 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.

Read more: