Pixelating Images Using jQuery and Canvas - pixel-flow

Pixelating Images Using jQuery and Canvas - pixel-flow
File Size: 803 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

pixel-flow is a jQuery image filter plugin that helps you implement pixelating effects on any images using Html5 canvas.

See also:

Installation:

# NPM
$ npm install pixel-flow jquery  --save

How to use it:

1. Load the latest version of jQuery library and the jQuery pixel-flow plugin in the html document.

<script src="jquery.min.js"></script>
<script src="scripts/pixel-flow.js"></script>

2. Load the GSAP's TweenMax.js in the document if you wish to implement animated pixelating effects on the images.

<script src="TweenMax.min.js"></script>

3. Pixalate the image you provide.

var $pixel = $('img').PixelFlow()

4. Animate the pixelated images back to normal over 2 seconds.

$('canvas').PixelFlow('simpleanimate', 0, 2000)

5. Available options to create custom pixelating effects.

var $pixel = $('img').PixelFlow({
    resolution: 16,
    offsetX: 0,
    offsetY: 0
})

Changelog:

2018-12-02

  • added vanilla JavaScript version

2018-03-12

  • bugfix

2015-09-30

  • corrected implementation of requestAnimationFrame

2015-05-16


This awesome jQuery plugin is developed by JamesNimlos. For more Advanced Usages, please check the demo page or visit the official website.